Question

我目前正在制作一个简单的页脚，我想将一行文本左对齐，另一行向右对齐。

这是我到目前为止所做的：

<div id="footer">
   Last Updated: October 15, 2012 <!--left align-->
   Contact Us  Login <!--right align (these will be links)-->
</div>

#footer {
font-family: Arial;
font-size: .9em;
color: #24ACAE;
border-top: 1px solid #24ACAE;
margin-left: 90px;
margin-right: 90px;
padding-top: 5px;
}

上面的代码导致两行文本彼此相邻，我尝试了各种方法来解决这个问题，例如将第二行放在一个跨度中并对齐，甚至将行放入表中。我所尝试的并没有导致两条线都正确对齐。

单独使用margin-left不起作用，因为当第一行更新并变得更长时，它会向下推动第二行。相对定位似乎也存在同样的问题。

希望我能忽略一些简单的事情。

Answer 1

<div id="footer">
<span style="float:left;">Last Updated: October 15, 2012</span>
<span style="float:right;">Contact Us  Login</span>

将它们放在跨度中，并设计跨度样式应该达到你想要的效果！

<强>更新你也可以用css做这个，如果你不想用内联的html代码。像这样：

<style>
.left {float:left;}
.right {float:right;}
</style>

然后

<div id="footer">
<div id="footer">
<span class="left">Last Updated: October 15, 2012</span>
<span class="right">Contact Us  Login</span>
</div>

这也允许你在整个页面中重用这些css类，允许你应用float：left / right;任何DOM元素的属性

这是一个jsfiddle ，显示它正常工作（如果看起来不对，请调整浏览器大小，因为它没有足够的空间来容纳一行中的所有文字，最初在我的浏览器窗口中）

左右对齐在一个简单的页脚

1 个答案: