如何使此文本更靠近页脚并更靠近页脚的一侧？

【问题标题】：How do I make this text closer together and more to the side of the footer?如何使此文本更靠近页脚并更靠近页脚的一侧？
【发布时间】：2021-09-05 01:27:51
【问题描述】：

我想让页脚左侧的所有文本靠得更近，并且更多地位于页脚的一侧。我正在使用媒体查询。 Here is the image so you can see what I mean。我尝试使用边距使其更靠近角落，但它没有移动。我不确定为什么它不起作用。

由于某种原因，当我单独选择 a 标签时，margin 不会移动它。

代码：

* {
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: arial, sans-serif;
}

li {
  float: right;
  list-style-type: none;
  margin-top: 20px;
}

a {
  text-decoration: none;
  color: black;
}

.left {
}

.left a {
  margin-left: 20px;
}

.right {
  margin-right: 20px;
}

.button {
  background-color: #4485f4;
  padding: 7px;
  border-radius: 5%;
}

.button a {
  color: #fff;
}

.icon {
  color: grey;
}

a {
  justify-items: center;
}
.button {
  margin-top: 15px;
}
.icon {
  margin-top: 7.5px;
}

img {
  position: absolute;
  width: 217px;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input {
  position: absolute;
  width: 460px;
  height: 34px;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  margin-top: 19px;
  border: 0.1px solid rgba(209, 209, 209, 0.658);
  outline: none;
  text-indent: 40px;
  font-size: 13px;
}

.search {
  position: absolute;
  top: 41.6%;
  left: 35.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.mic {
  width: 11px;
  position: absolute;
  top: 41.6%;
  left: 64.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.btn {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 45.8%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

.dark {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 54.2%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

footer {
  position: fixed;
  display: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  background-color: whitesmoke;
  margin-bottom: 3px;
}

.footer li a {
  color: #70757a;
}

.topfooter {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 37px;
  background-color: whitesmoke;
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
  color: #70757a;
  font-size: 12px;
}

.footerText {
  margin-left: 25px;
  font-size: 12px;
  color: #70757a;
}

.footerUl {
  display: flex;
  flex-direction: row;
  position: relative;
  top: 35%;
  left: 49%;
  transform: translate(-50%, -23%);
}

.rightLi {
  position: relative;
  float: right;
}

.footerText:hover {
  text-decoration: underline;
}

.btn:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.dark:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
input:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

a:hover {
  text-decoration: underline;
}

.rightLi {
  position: relative;
  left: 60%;
  transform: translateX(-50%);
}

.icon:hover {
  color: black;
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .dark {
    position: absolute;
    left: 63%;
    top: 49%;
    transform: translate(-50%, -50%);
  }

  .btn {
    position: absolute;
    left: 38%;
    top: 49%;
    transform: translate(-50%, -50%);
  }

  .mic {
    margin-left: 135px;
  }

  .search {
    position: absolute;
    left: 8%;
    top: 41.8%;
    transform: translate(-50%, -50%);
  }

  .footerUl {
    display: flex;
    flex-direction: column;
  }

  .left {
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);
  }

  footer {
    height: 150px;
  }

  .rightside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -800%);
    margin-left: 100px;
  }
}
<!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" />
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material Icons"
    />
    <title>Google</title>
  </head>
  <button type="button" class="btn btn-light">Google Search</button>
  <button type="button" class="dark btn-light">I'm Feeling Lucky</button>
    <ul>
      <li class="right button"><a href="https://github.com/I-Am-Programming">Sign In</a></li>
      <li class="right icon">
        <span class="material-icons navigation icon">apps</span>
      </li>
      <li class="right"><a href="#">Images</a></li>
      <li class="right"><a href="#">Gmail</a></li>
    </ul>
  <div> 
    <img src="images/google_logo.png" class="googleLogo" />
  </div>
  <input type="text">
  <span class="material-icons search searchIcon" style="font-size: 1.5em;">search</span>
  <img src="images/microphone.png" class="mic searchIcon">
  <!-- <span class="material-icons mic" style="font-size: 2rem;">mic</span> -->

  <footer>
    <ul class="footerUl">
      <li class="leftLi li"><a href="#" class="footerText left about">About</a></li>
      <li class="leftLi li"><a href="#" class="footerText left">Advertising</a></li>
      <li class="leftLi li"><a href="#" class="footerText left">Business</a></li>
      <li class="leftLi li"><a href="#" class="footerText left">How Search works</a></li>
      <li class="rightLi li"><a href="#" class="footerText rightside privacy">Privacy</a></li>
      <li class="rightLi li"><a href="#" class="footerText rightside terms">Terms</a></l>
      <li class="rightLi li"><a href="#" class="footerText rightside settings">Settings</a></li>
    </ul>
  </footer>

  </body>
</html>

【问题讨论】：

  • 所以你想让about,advertising 等在左下角一个在另一个之下？
  • 是的，我希望所有这些都更靠左，也更靠近彼此。

标签： html css media-queries footer


【解决方案1】：

您需要更改部分的行高。将下面的 sn-p 添加到您的 css 部分：@media screen and (max-width: 500px)。

.leftLi {
    line-height: 3;
}

【讨论】：

  • @I-Am-Coding 没问题，您介意按一下勾并接受我的回答吗？
【解决方案2】：

如果可行，请尝试以下 css

.footerUl {
  display: flex;
  flex-direction: column;
  padding-top: 4em;
}
.footerUl > *{
  margin: 0px;
}

【讨论】：

    【解决方案3】：
    1. 使项目彼此靠近

    您需要更改li margin-top。我已经把它改成了只有5px，所以你看到了效果。找到你喜欢的值。

    1. 将其全部向左移动

    您可以减少媒体查询中的footer 左填充。我已将其从 20px 减少到 5px。您还可以使用left 将.footerUl 移近边缘。

    * {
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: arial, sans-serif;
}

li {
  float: right;
  list-style-type: none;
  margin-top: 20px;
}

a {
  text-decoration: none;
  color: black;
}

.left {}

.left a {
  margin-left: 20px;
}

.right {
  margin-right: 20px;
}

.button {
  background-color: #4485f4;
  padding: 7px;
  border-radius: 5%;
}

.button a {
  color: #fff;
}

.icon {
  color: grey;
}

a {
  justify-items: center;
}

.button {
  margin-top: 15px;
}

.icon {
  margin-top: 7.5px;
}

img {
  position: absolute;
  width: 217px;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input {
  position: absolute;
  width: 460px;
  height: 34px;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  margin-top: 19px;
  border: 0.1px solid rgba(209, 209, 209, 0.658);
  outline: none;
  text-indent: 40px;
  font-size: 13px;
}

.search {
  position: absolute;
  top: 41.6%;
  left: 35.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.mic {
  width: 11px;
  position: absolute;
  top: 41.6%;
  left: 64.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.btn {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 45.8%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

.dark {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 54.2%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

footer {
  position: fixed;
  display: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  background-color: whitesmoke;
  margin-bottom: 3px;
}

.footer li a {
  color: #70757a;
}

.topfooter {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 37px;
  background-color: whitesmoke;
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
  color: #70757a;
  font-size: 12px;
}

.footerText {
  margin-left: 25px;
  font-size: 12px;
  color: #70757a;
}

.footerUl {
  display: flex;
  flex-direction: row;
  position: relative;
  top: 35%;
  left: 49%;
  transform: translate(-50%, -23%);
}

.rightLi {
  position: relative;
  float: right;
}

.footerText:hover {
  text-decoration: underline;
}

.btn:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.dark:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

input:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

a:hover {
  text-decoration: underline;
}

.rightLi {
  position: relative;
  left: 60%;
  transform: translateX(-50%);
}

.icon:hover {
  color: black;
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  .leftLi {
    margin-top: 5px;
  }
  footer {
    padding: 0 5px;
  }
  .dark {
    position: absolute;
    left: 63%;
    top: 49%;
    transform: translate(-50%, -50%);
  }
  .btn {
    position: absolute;
    left: 38%;
    top: 49%;
    transform: translate(-50%, -50%);
  }
  .mic {
    margin-left: 135px;
  }
  .search {
    position: absolute;
    left: 8%;
    top: 41.8%;
    transform: translate(-50%, -50%);
  }
  .footerUl {
    display: flex;
    flex-direction: column;
    left: 45%;
  }
  .left {
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);
  }
  footer {
    height: 150px;
  }
  .rightside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -800%);
    margin-left: 100px;
  }
}

    <!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" />
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons" />
  <title>Google</title>
</head>
<button type="button" class="btn btn-light">Google Search</button>
<button type="button" class="dark btn-light">I'm Feeling Lucky</button>
<ul>
  <li class="right button"><a href="https://github.com/I-Am-Programming">Sign In</a></li>
  <li class="right icon">
    <span class="material-icons navigation icon">apps</span>
  </li>
  <li class="right"><a href="#">Images</a></li>
  <li class="right"><a href="#">Gmail</a></li>
</ul>
<div>
  <img src="images/google_logo.png" class="googleLogo" />
</div>
<input type="text">
<span class="material-icons search searchIcon" style="font-size: 1.5em;">search</span>
<img src="images/microphone.png" class="mic searchIcon">
<!-- <span class="material-icons mic" style="font-size: 2rem;">mic</span> -->

<footer>
  <ul class="footerUl">
    <li class="leftLi li"><a href="#" class="footerText left about">About</a></li>
    <li class="leftLi li"><a href="#" class="footerText left">Advertising</a></li>
    <li class="leftLi li"><a href="#" class="footerText left">Business</a></li>
    <li class="leftLi li"><a href="#" class="footerText left">How Search works</a></li>
    <li class="rightLi li"><a href="#" class="footerText rightside privacy">Privacy</a></li>
    <li class="rightLi li"><a href="#" class="footerText rightside terms">Terms</a></l>
      <li class="rightLi li"><a href="#" class="footerText rightside settings">Settings</a></li>
  </ul>
</footer>

</body>

</html>

    编辑

    原始的 HTML 标记不是那么好。只有一个 ul 和不同定位的 li 组，你让自己的生活变得复杂。我觉得控制2个ul要容易得多。

    * {
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: arial, sans-serif;
}

li {
  float: right;
  list-style-type: none;
  margin-top: 20px;
}

a {
  text-decoration: none;
  color: black;
}

.left {}

.left a {
  margin-left: 20px;
}

.right {
  margin-right: 20px;
}

.button {
  background-color: #4485f4;
  padding: 7px;
  border-radius: 5%;
}

.button a {
  color: #fff;
}

.icon {
  color: grey;
}

a {
  justify-items: center;
}

.button {
  margin-top: 15px;
}

.icon {
  margin-top: 7.5px;
}

img {
  position: absolute;
  width: 217px;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input {
  position: absolute;
  width: 460px;
  height: 34px;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  margin-top: 19px;
  border: 0.1px solid rgba(209, 209, 209, 0.658);
  outline: none;
  text-indent: 40px;
  font-size: 13px;
}

.search {
  position: absolute;
  top: 41.6%;
  left: 35.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.mic {
  width: 11px;
  position: absolute;
  top: 41.6%;
  left: 64.5%;
  transform: translate(-50%, -50%);
  color: rgba(124, 124, 124, 0.658);
}

.btn {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 45.8%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

.dark {
  padding: 8px 10px;
  position: absolute;
  top: 49%;
  left: 54.2%;
  transform: translate(-50%, -50%);
  outline: none;
  border: 1px solid #f8f9fa;
  color: #3c4043;
  background-color: #f8f9fa;
  font-size: 11.5px;
}

footer {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: whitesmoke;
  margin-bottom: 3px;
}

.footer li a {
  color: #70757a;
}

.topfooter {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 37px;
  background-color: whitesmoke;
  padding: 15px 30px;
  border-bottom: 1px solid #dadce0;
  color: #70757a;
  font-size: 12px;
}

.footerText {
  margin-left: 25px;
  font-size: 12px;
  color: #70757a;
}

footer ul {
  display: flex;
  flex-direction: row;
  padding: 0 2em;
}

footer li {
  margin-bottom: 12px;
}

.footerText:hover {
  text-decoration: underline;
}

.btn:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.dark:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

input:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

a:hover {
  text-decoration: underline;
}

.rightLi {
  position: relative;
  left: 60%;
  transform: translateX(-50%);
}

.icon:hover {
  color: black;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  footer li {
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  footer .footerText {
    margin-left: 8px;
  }
  footer ul {
    margin-left: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
  }
  footer {
    height: 150px;
    padding: 0 5px;
    align-items: center;
    overflow: none;
  }
  .dark {
    position: absolute;
    left: 63%;
    top: 49%;
    transform: translate(-50%, -50%);
  }
  .btn {
    position: absolute;
    left: 38%;
    top: 49%;
    transform: translate(-50%, -50%);
  }
  .mic {
    margin-left: 135px;
  }
  .search {
    position: absolute;
    left: 8%;
    top: 41.8%;
    transform: translate(-50%, -50%);
  }
  footer {}
}
    <!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" />
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons" />
  <title>Google</title>
</head>
<button type="button" class="btn btn-light">Google Search</button>
<button type="button" class="dark btn-light">I'm Feeling Lucky</button>
<ul>
  <li class="right button"><a href="https://github.com/I-Am-Programming">Sign In</a></li>
  <li class="right icon">
    <span class="material-icons navigation icon">apps</span>
  </li>
  <li class="right"><a href="#">Images</a></li>
  <li class="right"><a href="#">Gmail</a></li>
</ul>
<div>
  <img src="images/google_logo.png" class="googleLogo" />
</div>
<input type="text">
<span class="material-icons search searchIcon" style="font-size: 1.5em;">search</span>
<img src="images/microphone.png" class="mic searchIcon">
<!-- <span class="material-icons mic" style="font-size: 2rem;">mic</span> -->

<footer>

  <ul>
    <li><a href="#" class="footerText">About</a></li>
    <li><a href="#" class="footerText">Advertising</a></li>
    <li><a href="#" class="footerText">Business</a></li>
    <li><a href="#" class="footerText">How Search works</a></li>
  </ul>
  <ul>
    <li><a href="#" class="footerText">Privacy</a></li>
    <li><a href="#" class="footerText">Terms</a></l>
      <li><a href="#" class="footerText">Settings</a></li>
  </ul>

</footer>

</body>

</html>

    【讨论】：

    • 非常感谢它的工作！但是现在右侧的所有文本都被挤压在一起了。我该如何解决这个问题？
    • 我更改了您的 HTML 标记。看看吧。
    猜你喜欢
    • 2015-03-23
    • 1970-01-01
    • 2014-11-13
    • 2018-06-21
    • 2021-07-29
    • 2014-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode