0

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

这是我到目前为止所拥有的：

<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;
}

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

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

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

4

1 回答 1

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

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p>

将它们放在跨度中，并对跨度进行样式设置应该可以实现您想要的！

更新 您也可以使用 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（如果它看起来不正确，请调整浏览器的大小，因为它没有足够的空间来容纳一行中的所有文本，最初在我的浏览器窗口中）

于 2012-10-15T22:57:30.200 回答