欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

小寬度上的元素未對齊

CSS
錢淋西2年前8瀏覽0評論

我的網(wǎng)站上的一個元素錯位一旦整體寬度足夠小，它就會低于期望的寬度，寬度越小越慢。Discord按鈕的元素是一個帶有#dciconid的div。這樣做的目的是，一旦按鈕被點擊，它就會改變它的形式，顯示出一個不一致的用戶標簽。整個事情有大眾描述的寬度，所以我不認為這是或應該是問題。到目前為止，我已經(jīng)試過了:

使子元素內(nèi)聯(lián)成塊； 絕對居中一個位置內(nèi)的元素:相對div容器(當前站點的狀態(tài))； 刪除flex屬性； 改變字體。 此外，其他按鈕似乎沒有調(diào)整它們的寬度和高度參數(shù)，最終導致從它們的容器中溢出(div.footerblock(2))，這也是一個問題。

參考下面的片段。

這是原件。

PS如果可能的話，請告訴我CSS代碼是否美觀，我可以糾正什么。謝謝大家！

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

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*="footer"] {
  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*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]: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('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
  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;
}

<html>

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

<body>
  <footer>
    <div class="footerblock">
      <p class="english">
        ? 2023 Jakub Namy?lak. All rights reserved.
      </p>
      <p class="polish">
        ? 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  target="_blank">
        <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
      </a>
      <a  target="_blank">
        <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
      </a>
      <a  target="_blank">
        <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
      </a>
      <a  target="_blank">
        <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
      </a>
    </div>
  </footer>
</body>

</html>

我在這里做了很多我認為相當直觀的改變。基本上，以簡化為目標，努力做幾件事:

不要過度應用樣式。您的星號選擇器是有問題的，因為它們覆蓋了過多的元素。

努力使你的CSS可重用。這意味著避免超特定的選擇器，如:n-child(2)和IDs。請改用自定義類。

為動作元素使用按鈕，而不是div。

為在JavaScript中多次選擇的元素創(chuàng)建變量。

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

  if (!document.getElementById('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');
  }
}

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*="marker"],
*[class*="footerimage_"],
*[class*="footerimage_"]: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('https://shatterwares.com/RESOURCES/SHWHP_RES/gradients/gradient-discord.png');
  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;
}

<body>
  <footer>
    <div class="footerblock justify-left">
      <p class="english">
        ? 2023 Jakub Namy?lak. All rights reserved.
      </p>

      <p class="polish">
        ? 2023 Jakub Namy?lak. Wszelkie prawa zastrze?one.
      </p>
    </div>

    <div class="footerblock justify-right">
      <a href="mailto:kawkayt7@gmail.com" target="_blank">
        <img class="footerimage_mail" src="https://shatterwares.com/RESOURCES/PRIMARY/mail.jpg" alt="spotify">
      </a>

      <button class="discordicon-btn" id="dcicon" onclick="discordAnim()">
        <img id="footerimagediscord" class="discordicon" src="https://shatterwares.com/RESOURCES/PRIMARY/discord.png" alt="spotify">
      </button>

      <a  target="_blank">
        <img class="footerimage_spotify" src="https://shatterwares.com/RESOURCES/PRIMARY/spotify.png" alt="spotify">
      </a>

      <a  target="_blank">
        <img class="footerimage_youtube" src="https://shatterwares.com/RESOURCES/PRIMARY/youtube.png" alt="youtube">
      </a>

      <a  target="_blank">
        <img class="footerimage_steam" src="https://shatterwares.com/RESOURCES/PRIMARY/steam.png" alt="steam">
      </a>

      <a  target="_blank">
        <img class="footerimage_github" src="https://shatterwares.com/RESOURCES/PRIMARY/github.png" alt="github">
      </a>
    </div>
  </footer>
</body>