页脚中的居中和间距图标

Question

如何让这些图标排成一排并有 space-around？无法理解为什么它们不会自动排成一行...... 希望他们排成一排，space 围绕并居中。如果它们在小于 768px 时也可以堆叠，那就太好了。我在这里错过了什么？

<footer>
  <div class="credit">
    <p>2018 Roger Jorns</p>
  </div>
  <div class="footer-logo">
    <img class="footer-pic" src="/Users/rogerjorns/Desktop/Portfolio/food site/assets/images/LogoMakr_1KiQWa.png" alt="">
  </div>
  <div class="social">
    <ul class="icons">
      <li><i class="fab fa-facebook-f"></i></li>
      <li><i class="fab fa-twitter"></i></li>
      <li><i class="fab fa-instagram"></i></li>
      <li><i class="fab fa-yelp"></i></li>
    </ul>
  </div>
</footer>

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  width: 100%;
  background-color: gray;
}

li {
  list-style: none;
}

.credit {
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  grid-column: 2;
  width: 40%;
  margin: 0 auto;
}

.social {
  grid-column: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

它们没有出现在行中，因为 list-items 或 <li> 元素默认 display 属性为：display: list-item。使用 flexbox 将它们显示为行，周围有 space。

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  width: 100%;
  background-color: gray;
}

li {
  list-style: none;
}

.credit {
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  grid-column: 2;
  width: 40%;
  margin: 0 auto;
}

.social {
  grid-column: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

@media only screen and (max-width: 600px) {
    ul {
      display: initial;
    }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">

<footer>
  <div class="credit">
    <p>2018 Roger Jorns</p>
  </div>
  <div class="footer-logo">
    <img class="footer-pic" src="/Users/rogerjorns/Desktop/Portfolio/food site/assets/images/LogoMakr_1KiQWa.png" alt="">
  </div>
  <div class="social">
    <ul class="icons">
      <li><i class="fab fa-facebook-f"></i></li>
      <li><i class="fab fa-twitter"></i></li>
      <li><i class="fab fa-instagram"></i></li>
      <li><i class="fab fa-yelp"></i></li>
    </ul>
  </div>
</footer>

如果您希望图标在设备小于 786px 时堆叠，请使用 media-queries 禁用 flex-box。

Answer 2

flex 属性必须以直接父容器元素为目标，它不是 .social 而是 .icons。

https://codepen.io/anon/pen/PBVdNJ

页脚中的居中和间距图标

Centering and spacing icons in footer

html

css

icons

footer

flexbox