时间戳

首页 > 解决方案 > 如何使此文本更靠近页脚并更靠近页脚的一侧？

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

问题描述

我想让页脚左侧的所有文本靠得更近，并且更多地位于页脚的一侧。我正在使用媒体查询。这是图像，因此您可以了解我的意思。我尝试使用边距使其更靠近角落，但它没有移动。我不确定为什么它不起作用。

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

代码：

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

标签： htmlcssmedia-queriesfooter

解决方案

  1. 将项目彼此靠近

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

  1. 全部向左移动

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

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

推荐阅读