在一個簡單的頁腳中左右對齊

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> 

將它們放在跨度，和造型的跨度要做到你想要的！

UPDATE 你也可以用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類，讓您應用浮動：左/右;屬性以任何DOM元素

這裏有一個jsfiddle顯示它的工作（如果不是看它的權利，調整您的瀏覽器，因爲它沒有足夠的空間來適合所有文本在一行，在我的瀏覽器窗口最初）