Question

我无法让我的社交媒体按钮在我网站的页脚上左右对齐。我不确定我做错了什么，有人可以帮忙吗？

我已尝试margin-left，margin-right，float: left，float: right

这就是我所拥有的，它所做的只是中心。

HTML

<footer class="container-fluid text-center">
  <div class="row" id="contact">
    <p class="col-sm-4"></p>
    <h1>Reach me here</h1>
    <br>
    <br>
    <a href="https://twitter.com/Aarons_coding" target="_blank">
      <img src="images/twitter.png" alt="twitter" id="twitt">
      <br/> Follower me
    </a>
    <a href='https://www.facebook.com/freelancecoding/posts/1534409766779543' target="_blank">
      <img src="images/fb.png" alt="fb" id="fb">
      <br/>Like Me on FB
    </a>
    <a href='https://www.linkedin.com/in/aaron-s-706193125' target="_blank">
      <img src="images/link.png" alt="linkedin" id="link">
      <br/>Connect with me
    </a>

  </div>
  <ul>
    <li><a href="#top">Top</a></li>
    <li><a href="#design">About the Designer</a></li>
  </ul>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d401398.0917589909!2d-85.9569564028764!3d38.18847214627973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88690b1ab35bd511%3A0xd4d3b4282071fd32!2sLouisville%2C+KY!5e0!3m2!1sen!2sus!4v1470171263135"
  width="350" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
  <div style="clear: both"></div>
</footer>

CSS

#twitt {
  width: 95px;
  height: 95px;
  margin: 5px 5px 0 18px;
}

#fb {
  width: 95px;
  height: 95px;
  margin: 5px 0 5px;
}

#link {
  width: 95px;
  height: 95px;
  margin: 5px 5px 0 5px;
}

footer {
  background-color: rgba(0, 0, 0, 1);
  font-size: 12px;
  padding: 20px 0;
  text-align: center;
}

footer .col-sm-4 {
  display: flex;
  justify-content: flex-end;
}

footer ul {
  float: right;
  text-align: right;
  list-style: none;
}

footer li img {
  width: 32px;
  height: 32px;
}

Answer 1

您可能没有在正确的元素上设置样式。

如果你这样做，那就有效：

#contact a{
  float: left;
}

此处示例https://jsfiddle.net/hw3odrba/

Answer 2

您需要在css中设置新样式，以防您想要将项目对齐到右侧：

#contact a{
  float: right;
}

如何使页脚对齐

2 个答案: