如何使无序列表在移动视图上响应？答案

【问题标题】：How to make unordered list responsive on mobile view?如何使无序列表在移动视图上响应？
【发布时间】：2022-01-26 07:11:09
【问题描述】：

我希望链接电子邮件、LinkedIn 和 GitHub 能够直接在标题底部做出响应，让我们在移动视图中进行连接。此外，我希望在移动视图中 200px 的边距顶部没有。为新手问题道歉。

@media only screen and (max-width: 1200px) {
  footer.content-container {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.footer {
  grid-area: footer;
  margin-top: 38px;
  margin-left: 10%;
  margin-right: 10%;
  height: 700px;
  margin-bottom: 100px;
}

.footer-text {
  padding: 200px 100px;
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-size: 80px;
  color: #bbbbbb;
  line-height: 80px;
  letter-spacing: -1px;
  display: inline-block;
}

.footer-contact {
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #222222;
  line-height: 50px;
  letter-spacing: -1px;
  text-decoration: none;
  padding-top: 0px;
  margin-left: 60px;
  margin-right: 60px;
}

.footer-text-color {
  color: #222222;
}

ul {
  list-style-type: none;
  text-decoration: none;
  margin-top: 200px;
  float: right;
}

<footer class="content-container footer">

  <div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>

  <ul>

    <li><a href=about.html class="footer-contact">Email</a></li>
    <li><a href=projects.html class="footer-contact">LinkedIn</a></li>
    <li><a href=contact.html class="footer-contact">GitHub</a></li>
  </ul>

</footer>

【问题讨论】：

标签： html css

【解决方案1】：

将此添加到您的 CSS：

@media only screen and (max-width: 845px) {
  .footer-text {
    padding-bottom: 0;
  }
  ul {
    margin-top: 0;
    float: unset;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media only screen and (max-width: 1200px) {
        footer.content-container {
          margin-left: 10px;
          margin-right: 10px;
        }
      }

      .footer {
        grid-area: footer;
        margin-top: 38px;
        margin-left: 10%;
        margin-right: 10%;
        height: 700px;
        margin-bottom: 100px;
      }

      .footer-text {
        padding: 200px 100px;
        font-family: "Khula", sans-serif;
        font-weight: 600;
        font-size: 80px;
        color: #bbbbbb;
        line-height: 80px;
        letter-spacing: -1px;
        display: inline-block;
      }

      .footer-contact {
        font-family: "Khula", sans-serif;
        font-weight: 600;
        font-size: 35px;
        color: #222222;
        line-height: 50px;
        letter-spacing: -1px;
        text-decoration: none;
        padding-top: 0px;
        margin-left: 60px;
        margin-right: 60px;
      }

      .footer-text-color {
        color: #222222;
      }

      ul {
        list-style-type: none;
        text-decoration: none;
        margin-top: 200px;
        float: right;
      }

      @media only screen and (max-width: 845px) {
        .footer-text {
          padding-bottom: 0;
        }
        ul {
          margin-top: 0;
          float: unset;
        }
      }
    </style>
  </head>
  <body>
    <footer class="content-container footer">
      <div class="footer-text">
        Let's <br />
        <span class="footer-text-color">Connect</span>
      </div>

      <ul>
        <li><a href="about.html" class="footer-contact">Email</a></li>
        <li><a href="projects.html" class="footer-contact">LinkedIn</a></li>
        <li><a href="contact.html" class="footer-contact">GitHub</a></li>
      </ul>
    </footer>
  </body>
</html>

【讨论】：

没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。
@seantsang94121 为什么它只在媒体查询放在css文件的底部而不是顶部时才有效？谢谢
通常最后一条规则优先。话虽这么说，但内联样式优先于外部样式表（内联！important 比外部！important 等更重要）存在“例外”，并且更具体的选择器会覆盖通用选择器。阅读所有相关信息@w3.org/TR/CSS2/cascade.html
简单来说：如果将我的“媒体查询代码”放在css文件的顶部，那么对.footer-text和ul的更改将被覆盖，因为最后一条规则优先。跨度>
@seantsang94121 谢谢