Question

我还在学习Sass，Compass和Susy所以请耐心等待。我的页面在页脚中居中有一点问题。它一直向左浮动。这是我正在使用的代码：

<footer>
<ul class="social">
    <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a</li>
    <li><a href="#"><i class="fa fa-instagram fa-3x"></i></a></li>
</ul>
<div class="copyright">&copy;2104 meylorodriguez.com<br />All Rights Reserved</div>
</footer>

以及我的CSS：

footer {

    ul.social {
        @include horizontal-list;
        background: $skyblue;
        padding: 4%;

        li a {
            color: $white;
        }       
    }

    .copyright {
        padding: 4%;
        text-align: center;
        font-family: 'Arbutus Slab', serif;
        font-size: small;
        color: $gray;
    }

}

我只需要将三个社交媒体图标集中在页脚中。

Answer 1

问题在于horizontal-list将float:left添加到<li>s。所以，你总是在左边有一个列表。

有一种方法可以防止这种情况发生。如果您将display: inline-block设置为<ul>并将背景和对齐方式设置为<footer>，那么您将获得该结果。

试一试：

footer {
  padding: 4%;
  background: blue;
  text-align: center;

  ul.social {
      @include horizontal-list;
      display: inline-block;

      li a {
         color: white;
      }       
  }

  .copyright {
    padding: 2% 4%;
    text-align: center;
    font-family: 'Arbutus Slab', serif;
    font-size: small;
    color: gray;
  }
}

希望它有所帮助。

问候。

编辑：要测试它我添加了我的自定义颜色值，您必须将其更改为您的

Sass和指南针中心问题

1 个答案: