html - 调整大小后，页脚社交图标无法平均分布

下面的codepen

https://codepen.io/nightcoder21/pen/BxwVdJ

下面的HTML

<section id="footer">
    <div class="container mb-1">
      <div class="row text-center text-xs-center text-sm-left text-md-left mb-2">



      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
          <ul class="list-unstyled list-inline social text-center">
            <li class="list-inline-item"><a href="javascript:void();"><i class="fab fa-facebook"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-mobile-alt"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-envelope"></i></a></li>

          </ul>
        </div>
        </hr>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
          <p>PC Handyman NZ - Small business / Home office IT solutions</p>
          <p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.sunlimetech.com" target="_blank">PC Handyman 2018</a></p>
        </div>
        </hr>
      </div>
    </div>
  </section>

在缩小到移动尺寸时，我似乎无法在页脚中保持3个社交图标的比例，我在所有较大尺寸的尺寸中看起来都很完美，

根据我的图片，它看起来变形了

我如何让他们排队？

谢谢

最佳答案

我认为您应该看看flexbox。有一个非常好的教程here

我制作了一个片段来解决您的问题：

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(250, 75, 83);
  width: 100%;
}
footer #icons{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer #icons i{
  font-size: 60px;
  font-style: normal;
  color: rgba(0,0,0,0.4);
  margin: 10px 30px;
}

@media (max-width: 520px){
  footer #icons{
    flex-direction: column;
  }
}

  <footer>
    <div id="icons">
      <i>☼</i>
      <i>☂</i>
      <i>☃</i>
    </div>
  </footer>

干杯！

关于html - 调整大小后，页脚社交图标无法平均分布，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50211227/