元素在小宽度上错位

huangapple
go评论59阅读模式
英文:

Element misaligns on small width

问题

我的网站上的一个元素在整体宽度足够小时会出现错位，逐渐在宽度较小的情况下偏离所需位置。这个元素是Discord按钮，一个带有#dcicon id的div。意图是，一旦点击按钮，它会改变形态，显示一个Discord用户标签。整个元素的宽度用vw描述，所以我认为这不应该是问题。到目前为止，我尝试过：

  • 将子元素设置为inline-block；
  • 在一个position: relative的div容器内绝对居中元素（当前站点的状态）；
  • 移除flex属性；
  • 更改字体。

另外，其他按钮似乎无法调整它们的宽度和高度参数，最终导致溢出其容器（div.footerblock(2)），这也是一个问题。

请参考下面的代码片段。

这是原始链接。

PS 如果可能的话，请告诉我CSS代码是否符合美观标准，我可以做出哪些改正。谢谢！

<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <footer>
    <div class="footerblock">
      <p class="english">
        &#169; 2023 Jakub Namyślak. All rights reserved.
      </p>
      <p class="polish">
        &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
      </p>
    </div>
    <div class="footerblock">
      <a href="mailto:kawkayt7@gmail.com" target="_blank">
        <img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
      </a>
      <div class="discordicon" id="dcicon" onclick="discordAnim()">
        <img id="footerimagediscord" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
        <p>soup can#7318</p>
      </div>
      <a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
        <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
      </a>
      <a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
        <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
      </a>
      <a href="https://steamcommunity.com/id/wechanged" target="_blank">
        <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
      </a>
      <a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
        <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
      </a>
    </div>
  </footer>
</body>

</html>
英文:

An element on my site misaligns once the overall width is small enough, it gets under the desired, gradually further the smaller the width. The element it the Discord button, a div with #dciconid. The intention is, that once the button is clicked, it changes its form, revealing a discord user tag. The whole thing has width described in vw, so I don't think that is or should be the problem. So far, I had tried:

  • making the child elements inline-block;
  • Absolutely centering the element inside a position: relative div container (current site's state);
  • Removing the flex property;
  • Changing fonts.

Also, other buttons seem to not regulate their width and height parameters, eventually resulting in overflowing from their container (div.footerblock(2)), which is a problem too .

Refer to the snippet below.

Here is the original.

PS If possible, please, tell me if the CSS code is esthetical and what I can correct. Thank you!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function discordAnim()
{
if(document.getElementById(&#39;dcicon&#39;).classList.contains(&#39;discordicontransformed&#39;) == false)
{
document.getElementById(&#39;footerimagediscord&#39;).classList.add(&#39;invert&#39;);
document.getElementById(&#39;dcolor&#39;).classList.remove(&#39;colora&#39;);
document.getElementById(&#39;dcolor&#39;).classList.add(&#39;colorb&#39;);
document.getElementById(&#39;dcicon&#39;).classList.remove(&#39;discordicon&#39;);
document.getElementById(&#39;dcicon&#39;).classList.add(&#39;discordicontransformed&#39;);
}
else
{
document.getElementById(&#39;footerimagediscord&#39;).classList.remove(&#39;invert&#39;);
document.getElementById(&#39;dcolor&#39;).classList.remove(&#39;colorb&#39;);
document.getElementById(&#39;dcolor&#39;).classList.add(&#39;colora&#39;);
document.getElementById(&#39;dcicon&#39;).classList.add(&#39;discordicon&#39;);
document.getElementById(&#39;dcicon&#39;).classList.remove(&#39;discordicontransformed&#39;);
}
}

<!-- language: lang-css -->

footer {
display: flex;
width: 100%;
min-height: 3vw;
background-color: antiquewhite;
}
div.footerblock:nth-of-type(1) {
justify-content: left;
}
div.footerblock:nth-of-type(2) {
justify-content: right;
}
div.footerblock {
min-height: inherit;
}
*[class*=&quot;footer&quot;] {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
border-left: 0.1vw
}
div.footerblock:last-child {
margin-right: 3vw;
}
a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
display: contents;
text-decoration: none;
color: #4C00FF;
}
#dcicon {
cursor: pointer;
}
div.footerblock:nth-of-type(2) div.discordicon {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
}
div#dcolor {
width: 1.75vw;
height: 1.75vw;
border-radius: 50%;
}
.imagery1:hover,
main div.contents a,
*[class*=&quot;marker&quot;],
*[class*=&quot;footerimage_&quot;],
*[class*=&quot;footerimage_&quot;]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
div.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
border-radius: 50%;
}
div.footerblock:nth-of-type(2) div.discordicon img {
margin-right: 0;
}
div.discordicon p {
display: none;
}
div.footerblock p {
margin: 0;
margin-left: 6vw;
font-family: monospace;
font-size: 0.75vw;
}
div.discordicontransformed {
display: flex;
justify-content: left;
align-items: center;
width: initial;
height: 1.75vw;
background-image: url(&#39;https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png&#39;);
background-size: 100% 100%;
padding: 0.25vw;
margin-right: 1.75vw;
border-radius: 5vw;
}
div.colorb {
width: 1.725vw !important;
width: 1.725vw !important;
}
div.discordicontransformed img {
width: 1.725vw;
height: 1.725vw;
margin-right: 0;
border-radius: 50%;
}
.invert {
filter: invert(1);
}
div.footerblock:nth-of-type(2) div.discordicontransformed p {
display: block;
font-family: monospace;
font-size: 0.75vw;
color: white;
margin: 0 0.4vw;
}

<!-- language: lang-html -->

&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UFT-8&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;footer&gt;
&lt;div class=&quot;footerblock&quot;&gt;
&lt;p class=&quot;english&quot;&gt;
&#169; 2023 Jakub Namyślak. All rights reserved.
&lt;/p&gt;
&lt;p class=&quot;polish&quot;&gt;
&#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;footerblock&quot;&gt;
&lt;a href=&quot;mailto:kawkayt7@gmail.com&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_mail&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg&quot; alt=&quot;spotify&quot;&gt;
&lt;/a&gt;
&lt;div class=&quot;discordicon&quot; id=&quot;dcicon&quot; onclick=&quot;discordAnim()&quot;&gt;
&lt;img id=&quot;footerimagediscord&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/discord.png&quot; alt=&quot;spotify&quot;&gt;
&lt;p&gt;soup can#7318&lt;/p&gt;
&lt;/div&gt;
&lt;a href=&quot;https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_spotify&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/spotify.png&quot; alt=&quot;spotify&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_youtube&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/youtube.png&quot; alt=&quot;youtube&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://steamcommunity.com/id/wechanged&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_steam&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/steam.png&quot; alt=&quot;steam&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://github.com/jakubekgranie/projecthub.github.io&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_github&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/github.png&quot; alt=&quot;github&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

我在这里进行了很多我认为相当直观的更改。基本上，努力通过简化的目标来做一些事情：

  • 不要过度应用样式。您的星号选择器存在问题，因为它们涵盖的元素比它们应该的要多。

  • 努力使您的CSS可重用。这意味着避免使用超特定的选择器，如 :nth-child(2) 和 IDs。改为使用自定义类。

  • 对于JavaScript中选择超过一次的元素，请创建变量。

function discordAnim() {
  const footerimagediscord = document.getElementById('footerimagediscord');
  const dcolor = document.getElementById('dcolor');
  const dcicon = document.getElementById('dcicon');

  if (!dcicon.classList.contains('discordicontransformed')) {
    footerimagediscord.classList.add('invert');
    dcolor.classList.remove('colora');
    dcolor.classList.add('colorb');
    dcicon.classList.remove('discordicon');
    dcicon.classList.add('discordicontransformed');
  } else {
    footerimagediscord.classList.remove('invert');
    dcolor.classList.remove('colorb');
    dcolor.classList.add('colora');
    dcicon.classList.add('discordicon');
    dcicon.classList.remove('discordicontransformed');
  }
}

/* ... */
.discordicon-btn {
  border: 0;
  background: 0;
  padding: 0;
  display: flex;
}
/* ... */

<!-- ... -->
<body>
  <footer>
    <div class="footerblock justify-left">
      <p class="english">
        &#169; 2023 Jakub Namyślak. All rights reserved.
      </p>

      <p class="polish">
        &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
      </p>
    </div>

    <div class="footerblock justify-right">
      <!-- ... -->
      <button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
        <img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
      </button>
      <!-- ... -->
    </div>
  </footer>
</body>
<!-- ... -->
英文:

I made a lot of changes here which I think are fairly intuitive. Basically, strive to do a few things with the goal of simplification:

  • Don't over-apply styles. Your asterisk selectors are problematic because they cover more elements than they should.

  • Strive to make your CSS reusable. This means avoiding hyper-specific selectors like :nth-child(2) and IDs. Use custom classes instead.

  • Use a button for action elements, not divs.

  • Create variables for elements which you select more than once in your JavaScript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function discordAnim() {
const footerimagediscord = document.getElementById(&#39;footerimagediscord&#39;);
const dcolor = document.getElementById(&#39;dcolor&#39;);
const dcicon = document.getElementById(&#39;dcicon&#39;);
if (!document.getElementById(&#39;dcicon&#39;).classList.contains(&#39;discordicontransformed&#39;)) {
footerimagediscord.classList.add(&#39;invert&#39;);
dcolor.classList.remove(&#39;colora&#39;);
dcolor.classList.add(&#39;colorb&#39;);
dcicon.classList.remove(&#39;discordicon&#39;);
dcicon.classList.add(&#39;discordicontransformed&#39;);
} else {
footerimagediscord.classList.remove(&#39;invert&#39;);
dcolor.classList.remove(&#39;colorb&#39;);
dcolor.classList.add(&#39;colora&#39;);
dcicon.classList.add(&#39;discordicon&#39;);
dcicon.classList.remove(&#39;discordicontransformed&#39;);
}
}

<!-- language: lang-css -->

footer {
display: flex;
width: 100%;
min-height: 3vw;
background-color: antiquewhite;
}
.justify-left {
justify-content: left;
}
.justify-right {
justify-content: right;
}
.footerblock {
min-height: inherit;
display: flex;
align-items: center;
}
.footerblock:last-child {
margin-left: auto;
margin-right: 3vw;
}
a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
display: contents;
text-decoration: none;
color: #4C00FF;
}
.discordicon-btn {
border: 0;
background: 0;
padding: 0;
display: flex;
}
.footerblock:nth-of-type(2) .discordicon {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
}
#dcolor {
width: 1.75vw;
height: 1.75vw;
border-radius: 50%;
}
.imagery1:hover,
main div.contents a,
*[class*=&quot;marker&quot;],
*[class*=&quot;footerimage_&quot;],
*[class*=&quot;footerimage_&quot;]:hover,
#banner p a,
#banner p a:hover,
div.england,
div.poland,
div.england:hover,
div.poland:hover,
div.colora,
div.colora:hover {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
width: 1.75vw;
height: 1.75vw;
margin-right: 1.75vw;
border-radius: 50%;
}
.footerblock:nth-of-type(2) div.discordicon img {
margin-right: 0;
}
.discordicon p {
display: none;
}
.footerblock p {
margin: 0;
margin-left: 6vw;
font-family: monospace;
font-size: 0.75vw;
}
.discordicontransformed {
display: flex;
justify-content: left;
align-items: center;
width: initial;
height: 1.75vw;
background-image: url(&#39;https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png&#39;);
background-size: 100% 100%;
padding: 0.25vw;
margin-right: 1.75vw;
border-radius: 5vw;
}
.colorb {
width: 1.725vw !important;
width: 1.725vw !important;
}
.discordicontransformed img {
width: 1.725vw;
height: 1.725vw;
margin-right: 0;
border-radius: 50%;
}
.invert {
filter: invert(1);
}
.footerblock:nth-of-type(2) div.discordicontransformed p {
display: block;
font-family: monospace;
font-size: 0.75vw;
color: white;
margin: 0 0.4vw;
}

<!-- language: lang-html -->

&lt;body&gt;
&lt;footer&gt;
&lt;div class=&quot;footerblock justify-left&quot;&gt;
&lt;p class=&quot;english&quot;&gt;
&#169; 2023 Jakub Namyślak. All rights reserved.
&lt;/p&gt;
&lt;p class=&quot;polish&quot;&gt;
&#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;footerblock justify-right&quot;&gt;
&lt;a href=&quot;mailto:kawkayt7@gmail.com&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_mail&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg&quot; alt=&quot;spotify&quot;&gt;
&lt;/a&gt;
&lt;button class=&quot;discordicon-btn&quot; id=&quot;dcicon&quot; onclick=&quot;discordAnim()&quot;&gt;
&lt;img id=&quot;footerimagediscord&quot; class=&quot;discordicon&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/discord.png&quot; alt=&quot;spotify&quot;&gt;
&lt;/button&gt;
&lt;a href=&quot;https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_spotify&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/spotify.png&quot; alt=&quot;spotify&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_youtube&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/youtube.png&quot; alt=&quot;youtube&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://steamcommunity.com/id/wechanged&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_steam&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/steam.png&quot; alt=&quot;steam&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://github.com/jakubekgranie/projecthub.github.io&quot; target=&quot;_blank&quot;&gt;
&lt;img class=&quot;footerimage_github&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/github.png&quot; alt=&quot;github&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月23日 00:09:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76308071.html
  • css
  • css-position
  • html
  • javascript
  • onclick
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定