页脚中链接的对齐方式

Question

我试图克隆google的主页，我从页面的页脚开始，被页脚中的链接对齐卡住了。

我的html代码：

<div class="footer">
<hr  >
<footer >
    <a href="" class="advertising">Advertising</a>
    <a href="" class="business">Business</a>
    <a href="" class="about">About</a>
    <a href="" class="privacy">Privacy</a>
    <a href="" class="terms">Terms</a>
    <a href="" class="settings">Settings</a>
</footer>
</div> 

我的css代码：

.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}

footer{
    background-color: #F4F6F7;
    height: 45px;



}

hr{
    border-color: #CCD1D1;
    margin-bottom: 0px;
}

.advertising, .business, .about, .privacy, .terms, .settings{
    color: #909497;
    font-size: 1.2em;
    margin-top: 11px;             //THIS LINE.


}

.advertising, .business, .about{
    margin-left: 40px;
}


.privacy, .terms, .settings{
    margin-right: 40px;
    float: right;

}   

谁能告诉我，为什么行“边际-顶部: 11px”不适用于前3个链接在页脚(广告，业务，关于)。页脚截图：

​

Answer 1

虽然上面的答案是可行的，但更好的解决方案是：

​

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%
}

footer {
  background-color: #F4F6F7;
  height: 45px;
}

hr {
  border-color: #CCD1D1;
  margin-bottom: 0px;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

.footer-links {
  list-style-type: none;
}

.footer-links li {
  display: inline;
}

.footer-links li a {
  color: #909497;
  font-size: 1.2em;
  margin: 11px 20px 0px;
}

<div class="footer">
  <hr/>
  <footer>
    <ul class="footer-links align-left">
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <ul class="footer-links align-right">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </footer>
</div>

​

通过将链接放在单独的菜单中，它允许您在将来非常快速地添加和删除链接，而不会影响CSS类。

这也修复了所有的边距错误，因为我们声明每个锚标签的边距都是11px。你也会注意到，我没有设置40px的左边界和右边界，而是将每边设置为20px，这将产生相同的效果。

您还可以在HTML中的其他地方使用.align-left和.align-right类，而不是在CSS中为每个类声明它。

当每个链接都有相同的风格时，没有必要给每个链接指定自己的类。但是，如果您想突出显示一个特定的链接，那么您自然只需在其中一个锚标签上添加一个.highlight类，并在CSS中指定样式。

此方法还提供完全的浏览器支持。在我写这篇文章的时候，Flexbox在IE上有点喜怒无常。

希望这能有所帮助！

Answer 2

您需要在前三个链接中添加float:left，因为您已经在后三个链接上应用了float:right。

.advertising, .business, .about{
    margin-left: 40px;
    float:left;
}

Answer 3

我通过codepen运行它，当我使用页脚作为选择器将页边距11px应用于所有元素时，它起作用了。

我也推荐使用flexbox，它更容易使用，下面是一个例子

`http://codepen.io/HTMLanto/pen/gmNedQ`

干杯！