主页 / 问题 / 796628
Accepted
Новиков Максим
Asked:2020-03-11 23:13:19 +0800 CST2020-03-11 23:13:19 +0800 CST

在页脚中组织水平 ul

  • 772

有以下代码：

footer {
  width: auto;
  background-color: #444;
  padding: 10px;
}

.footer {
  position: relative;
  overflow: hidden;
  height: 70px;
}

.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  float: left;
  height: 70px;
}

.footer ul li {
  position: relative;
  left: -50%;
  float: left;
  margin: 0 40px;
}

.footer ul li a {
  color: white;
  text-decoration: none;
  line-height: 70px;
  font-family: 'Nunito', sans-serif;
  transition: color 0.3s ease-out;
  text-transform: uppercase;
  font-size: 16px;
}

.footer ul li a:hover {
  color: #15C3DB;
}

.rightsFooter {
  display: block;
  text-align: center;
  color: white;
  font-family: 'Nunito', sans-serif;
  padding-top: 10px;
  font-size: 16px;
}


/* from 641px to 833px */

@media (min-width: 641px) and (max-width: 833px) {
  .footer ul li a {
    font-size: 13px;
  }
  .rightsFooter {
    font-size: 13px;
  }
}


/* from 401px to 640px */

@media (min-width: 401px) and (max-width: 640px) {
  .footer {
    padding-bottom: 57%;
  }
  .footer ul li {
    float: none;
    text-align: center;
  }
  .footer ul li a {
    font-size: 13px;
  }
  .rightsFooter {
    font-size: 13px;
  }
}
<footer>

  <div class="footer">
    <ul>
      <li><a href="#">contact</a></li>
      <li><a href="#">faq</a></li>
      <li><a href="#">story</a></li>
      <li><a href="#">charity</a></li>
      <li><a href="#">shop</a></li>
    </ul>
  </div>

  <p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>

</footer>

在 640 像素ul处，它呈现水平形状，但随着屏幕进一步缩小，它会滑到下方<p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>

如何解决？

html

1 个回答

  1. Best Answer

    解决方案flex：

    .footer {
  padding: 25px 0;
  background: #1d1f20;
}

.footer ul {
  margin: 0 0 50px 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.footer ul li a {
  color: #fff;
  text-decoration: none;
}

.rightsFooter {
  text-align: center;
  color: #fff;
}

@media (min-width: 401px) and (max-width: 640px) {
  .footer ul {
    flex-direction: column;
    align-items: center;
  }
  .footer ul li {
    margin: 15px 0;
  }
}
    <footer class="footer">
  <ul>
    <li><a href="#">contact</a></li>
    <li><a href="#">faq</a></li>
    <li><a href="#">story</a></li>
    <li><a href="#">charity</a></li>
    <li><a href="#">shop</a></li>
  </ul>
  <p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>
</footer>
<br>

    解决方案inline-block：

    .footer {
  padding: 25px 0;
  background: #1d1f20;
}

.footer ul {
  margin: 0 0 50px 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.footer ul li {
  display: inline-block;
  margin: 0 15px;
}

.footer ul li a {
  color: #fff;
  text-decoration: none;
}

.rightsFooter {
  text-align: center;
  color: #fff;
}

@media (min-width: 401px) and (max-width: 640px) {
  .footer ul li {
    display: block;
    margin: 15px 0;
  }
}
    <footer class="footer">
  <ul>
    <li><a href="#">contact</a></li>
    <li><a href="#">faq</a></li>
    <li><a href="#">story</a></li>
    <li><a href="#">charity</a></li>
    <li><a href="#">shop</a></li>
  </ul>
  <p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>
</footer>

<br>

    • 1

相关问题