元素在小宽度上错位

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

Element misaligns on small width

问题

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

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

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

请参考下面的代码片段。

这是原始链接。

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

  1. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5. </head>
  7. <body>
  8.   <footer>
  9.     <div class="footerblock">
  10.       <p class="english">
  11.         &#169; 2023 Jakub Namyślak. All rights reserved.
  12.       </p>
  13.       <p class="polish">
  14.         &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
  15.       </p>
  16.     </div>
  17.     <div class="footerblock">
  18.       <a href="mailto:kawkayt7@gmail.com" target="_blank">
  19.         <img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
  20.       </a>
  21.       <div class="discordicon" id="dcicon" onclick="discordAnim()">
  22.         <img id="footerimagediscord" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
  23.         <p>soup can#7318</p>
  24.       </div>
  25.       <a href="https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q" target="_blank">
  26.         <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
  27.       </a>
  28.       <a href="https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w" target="_blank">
  29.         <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
  30.       </a>
  31.       <a href="https://steamcommunity.com/id/wechanged" target="_blank">
  32.         <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
  33.       </a>
  34.       <a href="https://github.com/jakubekgranie/projecthub.github.io" target="_blank">
  35.         <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
  36.       </a>
  37.     </div>
  38.   </footer>
  39. </body>
  41. </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 -->

  1. function discordAnim()
  2. {
  3. if(document.getElementById(&#39;dcicon&#39;).classList.contains(&#39;discordicontransformed&#39;) == false)
  4. {
  5. document.getElementById(&#39;footerimagediscord&#39;).classList.add(&#39;invert&#39;);
  6. document.getElementById(&#39;dcolor&#39;).classList.remove(&#39;colora&#39;);
  7. document.getElementById(&#39;dcolor&#39;).classList.add(&#39;colorb&#39;);
  8. document.getElementById(&#39;dcicon&#39;).classList.remove(&#39;discordicon&#39;);
  9. document.getElementById(&#39;dcicon&#39;).classList.add(&#39;discordicontransformed&#39;);
  10. }
  11. else
  12. {
  13. document.getElementById(&#39;footerimagediscord&#39;).classList.remove(&#39;invert&#39;);
  14. document.getElementById(&#39;dcolor&#39;).classList.remove(&#39;colorb&#39;);
  15. document.getElementById(&#39;dcolor&#39;).classList.add(&#39;colora&#39;);
  16. document.getElementById(&#39;dcicon&#39;).classList.add(&#39;discordicon&#39;);
  17. document.getElementById(&#39;dcicon&#39;).classList.remove(&#39;discordicontransformed&#39;);
  18. }
  19. }

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

  1. footer {
  2. display: flex;
  3. width: 100%;
  4. min-height: 3vw;
  5. background-color: antiquewhite;
  6. }
  7. div.footerblock:nth-of-type(1) {
  8. justify-content: left;
  9. }
  10. div.footerblock:nth-of-type(2) {
  11. justify-content: right;
  12. }
  13. div.footerblock {
  14. min-height: inherit;
  15. }
  16. *[class*=&quot;footer&quot;] {
  17. display: flex;
  18. align-items: center;
  19. justify-content: center;
  20. width: 50%;
  21. border-left: 0.1vw
  22. }
  23. div.footerblock:last-child {
  24. margin-right: 3vw;
  25. }
  26. a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
  27. display: contents;
  28. text-decoration: none;
  29. color: #4C00FF;
  30. }
  31. #dcicon {
  32. cursor: pointer;
  33. }
  34. div.footerblock:nth-of-type(2) div.discordicon {
  35. width: 1.75vw;
  36. height: 1.75vw;
  37. margin-right: 1.75vw;
  38. }
  39. div#dcolor {
  40. width: 1.75vw;
  41. height: 1.75vw;
  42. border-radius: 50%;
  43. }
  44. .imagery1:hover,
  45. main div.contents a,
  46. *[class*=&quot;marker&quot;],
  47. *[class*=&quot;footerimage_&quot;],
  48. *[class*=&quot;footerimage_&quot;]:hover,
  49. #banner p a,
  50. #banner p a:hover,
  51. div.england,
  52. div.poland,
  53. div.england:hover,
  54. div.poland:hover,
  55. div.colora,
  56. div.colora:hover {
  57. transition-duration: 0.15s;
  58. transition-timing-function: ease-out;
  59. }
  60. div.footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
  61. width: 1.75vw;
  62. height: 1.75vw;
  63. margin-right: 1.75vw;
  64. border-radius: 50%;
  65. }
  66. div.footerblock:nth-of-type(2) div.discordicon img {
  67. margin-right: 0;
  68. }
  69. div.discordicon p {
  70. display: none;
  71. }
  72. div.footerblock p {
  73. margin: 0;
  74. margin-left: 6vw;
  75. font-family: monospace;
  76. font-size: 0.75vw;
  77. }
  78. div.discordicontransformed {
  79. display: flex;
  80. justify-content: left;
  81. align-items: center;
  82. width: initial;
  83. height: 1.75vw;
  84. background-image: url(&#39;https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png&#39;);
  85. background-size: 100% 100%;
  86. padding: 0.25vw;
  87. margin-right: 1.75vw;
  88. border-radius: 5vw;
  89. }
  90. div.colorb {
  91. width: 1.725vw !important;
  92. width: 1.725vw !important;
  93. }
  94. div.discordicontransformed img {
  95. width: 1.725vw;
  96. height: 1.725vw;
  97. margin-right: 0;
  98. border-radius: 50%;
  99. }
  100. .invert {
  101. filter: invert(1);
  102. }
  103. div.footerblock:nth-of-type(2) div.discordicontransformed p {
  104. display: block;
  105. font-family: monospace;
  106. font-size: 0.75vw;
  107. color: white;
  108. margin: 0 0.4vw;
  109. }

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

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;meta charset=&quot;UFT-8&quot;&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;
  6. &lt;footer&gt;
  7. &lt;div class=&quot;footerblock&quot;&gt;
  8. &lt;p class=&quot;english&quot;&gt;
  9. &#169; 2023 Jakub Namyślak. All rights reserved.
  10. &lt;/p&gt;
  11. &lt;p class=&quot;polish&quot;&gt;
  12. &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
  13. &lt;/p&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;footerblock&quot;&gt;
  16. &lt;a href=&quot;mailto:kawkayt7@gmail.com&quot; target=&quot;_blank&quot;&gt;
  17. &lt;img class=&quot;footerimage_mail&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg&quot; alt=&quot;spotify&quot;&gt;
  18. &lt;/a&gt;
  19. &lt;div class=&quot;discordicon&quot; id=&quot;dcicon&quot; onclick=&quot;discordAnim()&quot;&gt;
  20. &lt;img id=&quot;footerimagediscord&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/discord.png&quot; alt=&quot;spotify&quot;&gt;
  21. &lt;p&gt;soup can#7318&lt;/p&gt;
  22. &lt;/div&gt;
  23. &lt;a href=&quot;https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q&quot; target=&quot;_blank&quot;&gt;
  24. &lt;img class=&quot;footerimage_spotify&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/spotify.png&quot; alt=&quot;spotify&quot;&gt;
  25. &lt;/a&gt;
  26. &lt;a href=&quot;https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w&quot; target=&quot;_blank&quot;&gt;
  27. &lt;img class=&quot;footerimage_youtube&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/youtube.png&quot; alt=&quot;youtube&quot;&gt;
  28. &lt;/a&gt;
  29. &lt;a href=&quot;https://steamcommunity.com/id/wechanged&quot; target=&quot;_blank&quot;&gt;
  30. &lt;img class=&quot;footerimage_steam&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/steam.png&quot; alt=&quot;steam&quot;&gt;
  31. &lt;/a&gt;
  32. &lt;a href=&quot;https://github.com/jakubekgranie/projecthub.github.io&quot; target=&quot;_blank&quot;&gt;
  33. &lt;img class=&quot;footerimage_github&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/github.png&quot; alt=&quot;github&quot;&gt;
  34. &lt;/a&gt;
  35. &lt;/div&gt;
  36. &lt;/footer&gt;
  37. &lt;/body&gt;
  38. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

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

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

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

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

  1. function discordAnim() {
  2.   const footerimagediscord = document.getElementById('footerimagediscord');
  3.   const dcolor = document.getElementById('dcolor');
  4.   const dcicon = document.getElementById('dcicon');
  6.   if (!dcicon.classList.contains('discordicontransformed')) {
  7.     footerimagediscord.classList.add('invert');
  8.     dcolor.classList.remove('colora');
  9.     dcolor.classList.add('colorb');
  10.     dcicon.classList.remove('discordicon');
  11.     dcicon.classList.add('discordicontransformed');
  12.   } else {
  13.     footerimagediscord.classList.remove('invert');
  14.     dcolor.classList.remove('colorb');
  15.     dcolor.classList.add('colora');
  16.     dcicon.classList.add('discordicon');
  17.     dcicon.classList.remove('discordicontransformed');
  18.   }
  19. }
  1. /* ... */
  2. .discordicon-btn {
  3.   border: 0;
  4.   background: 0;
  5.   padding: 0;
  6.   display: flex;
  7. }
  8. /* ... */
  1. <!-- ... -->
  2. <body>
  3.   <footer>
  4.     <div class="footerblock justify-left">
  5.       <p class="english">
  6.         &#169; 2023 Jakub Namyślak. All rights reserved.
  7.       </p>
  9.       <p class="polish">
  10.         &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
  11.       </p>
  12.     </div>
  14.     <div class="footerblock justify-right">
  15.       <!-- ... -->
  16.       <button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
  17.         <img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
  18.       </button>
  19.       <!-- ... -->
  20.     </div>
  21.   </footer>
  22. </body>
  23. <!-- ... -->
英文:

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 -->

  1. function discordAnim() {
  2. const footerimagediscord = document.getElementById(&#39;footerimagediscord&#39;);
  3. const dcolor = document.getElementById(&#39;dcolor&#39;);
  4. const dcicon = document.getElementById(&#39;dcicon&#39;);
  5. if (!document.getElementById(&#39;dcicon&#39;).classList.contains(&#39;discordicontransformed&#39;)) {
  6. footerimagediscord.classList.add(&#39;invert&#39;);
  7. dcolor.classList.remove(&#39;colora&#39;);
  8. dcolor.classList.add(&#39;colorb&#39;);
  9. dcicon.classList.remove(&#39;discordicon&#39;);
  10. dcicon.classList.add(&#39;discordicontransformed&#39;);
  11. } else {
  12. footerimagediscord.classList.remove(&#39;invert&#39;);
  13. dcolor.classList.remove(&#39;colorb&#39;);
  14. dcolor.classList.add(&#39;colora&#39;);
  15. dcicon.classList.add(&#39;discordicon&#39;);
  16. dcicon.classList.remove(&#39;discordicontransformed&#39;);
  17. }
  18. }

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

  1. footer {
  2. display: flex;
  3. width: 100%;
  4. min-height: 3vw;
  5. background-color: antiquewhite;
  6. }
  7. .justify-left {
  8. justify-content: left;
  9. }
  10. .justify-right {
  11. justify-content: right;
  12. }
  13. .footerblock {
  14. min-height: inherit;
  15. display: flex;
  16. align-items: center;
  17. }
  18. .footerblock:last-child {
  19. margin-left: auto;
  20. margin-right: 3vw;
  21. }
  22. a:not(a[id], #banner p a, nav div.buttons a, main div.contents p a) {
  23. display: contents;
  24. text-decoration: none;
  25. color: #4C00FF;
  26. }
  27. .discordicon-btn {
  28. border: 0;
  29. background: 0;
  30. padding: 0;
  31. display: flex;
  32. }
  33. .footerblock:nth-of-type(2) .discordicon {
  34. width: 1.75vw;
  35. height: 1.75vw;
  36. margin-right: 1.75vw;
  37. }
  38. #dcolor {
  39. width: 1.75vw;
  40. height: 1.75vw;
  41. border-radius: 50%;
  42. }
  43. .imagery1:hover,
  44. main div.contents a,
  45. *[class*=&quot;marker&quot;],
  46. *[class*=&quot;footerimage_&quot;],
  47. *[class*=&quot;footerimage_&quot;]:hover,
  48. #banner p a,
  49. #banner p a:hover,
  50. div.england,
  51. div.poland,
  52. div.england:hover,
  53. div.poland:hover,
  54. div.colora,
  55. div.colora:hover {
  56. transition-duration: 0.15s;
  57. transition-timing-function: ease-out;
  58. }
  59. .footerblock:nth-of-type(2) img:not(div.discordicontransformed img) {
  60. width: 1.75vw;
  61. height: 1.75vw;
  62. margin-right: 1.75vw;
  63. border-radius: 50%;
  64. }
  65. .footerblock:nth-of-type(2) div.discordicon img {
  66. margin-right: 0;
  67. }
  68. .discordicon p {
  69. display: none;
  70. }
  71. .footerblock p {
  72. margin: 0;
  73. margin-left: 6vw;
  74. font-family: monospace;
  75. font-size: 0.75vw;
  76. }
  77. .discordicontransformed {
  78. display: flex;
  79. justify-content: left;
  80. align-items: center;
  81. width: initial;
  82. height: 1.75vw;
  83. background-image: url(&#39;https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png&#39;);
  84. background-size: 100% 100%;
  85. padding: 0.25vw;
  86. margin-right: 1.75vw;
  87. border-radius: 5vw;
  88. }
  89. .colorb {
  90. width: 1.725vw !important;
  91. width: 1.725vw !important;
  92. }
  93. .discordicontransformed img {
  94. width: 1.725vw;
  95. height: 1.725vw;
  96. margin-right: 0;
  97. border-radius: 50%;
  98. }
  99. .invert {
  100. filter: invert(1);
  101. }
  102. .footerblock:nth-of-type(2) div.discordicontransformed p {
  103. display: block;
  104. font-family: monospace;
  105. font-size: 0.75vw;
  106. color: white;
  107. margin: 0 0.4vw;
  108. }

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

  1. &lt;body&gt;
  2. &lt;footer&gt;
  3. &lt;div class=&quot;footerblock justify-left&quot;&gt;
  4. &lt;p class=&quot;english&quot;&gt;
  5. &#169; 2023 Jakub Namyślak. All rights reserved.
  6. &lt;/p&gt;
  7. &lt;p class=&quot;polish&quot;&gt;
  8. &#169; 2023 Jakub Namyślak. Wszelkie prawa zastrzeżone.
  9. &lt;/p&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;footerblock justify-right&quot;&gt;
  12. &lt;a href=&quot;mailto:kawkayt7@gmail.com&quot; target=&quot;_blank&quot;&gt;
  13. &lt;img class=&quot;footerimage_mail&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg&quot; alt=&quot;spotify&quot;&gt;
  14. &lt;/a&gt;
  15. &lt;button class=&quot;discordicon-btn&quot; id=&quot;dcicon&quot; onclick=&quot;discordAnim()&quot;&gt;
  16. &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;
  17. &lt;/button&gt;
  18. &lt;a href=&quot;https://open.spotify.com/user/31ytzqdvaeubfcjjitrinmaba52q&quot; target=&quot;_blank&quot;&gt;
  19. &lt;img class=&quot;footerimage_spotify&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/spotify.png&quot; alt=&quot;spotify&quot;&gt;
  20. &lt;/a&gt;
  21. &lt;a href=&quot;https://www.youtube.com/channel/UCkGfjx-MIcuONgvoYGDgP9w&quot; target=&quot;_blank&quot;&gt;
  22. &lt;img class=&quot;footerimage_youtube&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/youtube.png&quot; alt=&quot;youtube&quot;&gt;
  23. &lt;/a&gt;
  24. &lt;a href=&quot;https://steamcommunity.com/id/wechanged&quot; target=&quot;_blank&quot;&gt;
  25. &lt;img class=&quot;footerimage_steam&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/steam.png&quot; alt=&quot;steam&quot;&gt;
  26. &lt;/a&gt;
  27. &lt;a href=&quot;https://github.com/jakubekgranie/projecthub.github.io&quot; target=&quot;_blank&quot;&gt;
  28. &lt;img class=&quot;footerimage_github&quot; src=&quot;https://shatterwares.com/RESOURCES/PRIMARY/github.png&quot; alt=&quot;github&quot;&gt;
  29. &lt;/a&gt;
  30. &lt;/div&gt;
  31. &lt;/footer&gt;
  32. &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:

确定