页脚中链接的对齐方式

Question

我正在尝试克隆谷歌的主页。我从页面的页脚开始，卡在页脚链接的对齐位置。

我的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;

}   

任何人都可以告诉我，为什么这条线＆＃34; margin-top：11px＆＃34;不适用于页脚中的前3个链接（广告，商业，约）。页脚截图：

Answer 1

虽然上述答案可行，但更好的解决办法是：

this

main

通过将链接放入单独的菜单中，它可以让您在将来快速添加和删除链接，而无需乱搞CSS类。

这也解决了您所遇到的任何保证金错误，因为我们声明每个锚标记的边距为11px。您还会注意到，而不是40px左边距和右边距，我将每边设置为20px，这将产生相同的效果。

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

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

此方法还提供完整的浏览器支持。当我写这篇文章时，Flexbox对IE有点不稳定。

希望这有帮助！

Answer 2

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

float:right

Answer 3

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

我也建议使用flexbox，它很容易使用，这是一个例子

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

干杯！