對齊字符

Question

在我的聯繫信息中，我有幾行看起來像這樣。

Phone: 123 456 
Web site: page.eu 

我想創建一個垂直對齊分號。我認爲一種方法是使用兩個不同的div，將它們浮動到左側，並將其中一個的內容右對齊，另一個將左對齊。有沒有更好的方法呢？

Answer 1

固定寬度浮動的div或表（但不要吹噓它，因爲它是不是最好的做法）

http://jsfiddle.net/pXScG/3/

Answer 2

鑑於這似乎是聯繫人信息列表，我建議首先使用列表元素，然後兩個跨遏制，並對齊，文本：

<ul id="contact"> 
    <li><span class="contactMethod">Phone</span>:<span class="contactInfo">123 456</span></li> 
    <li><span class="contactMethod">Web site</span>:<span class="contactInfo">page.eu</span></li> 
</ul> 

隨着CSS：

span { 
    display: inline-block; 
} 

span.contactMethod { 
    width: 30%; 
    text-align: right; 
} 

span.contactInfo { 
    width: 65%; 
    text-indent: 0.5em; 
}​ 

JS Fiddle demo。

Answer 3

示例中沒有分號（;）;我認爲你的意思是冒號（:)。你所擁有的是一張數據表，所以HTML表格是最合適的結構，如果你簡單地右對齊第一列，它會給出所需的渲染。但是，最好也設置填充：

<style> 
th { text-align: right; font-weight: normal; padding-right: 0.3em; } 
</style> 
<table> 
<tr><th>Phone: <td>123 456 
<tr><th>Web site:<td>page.eu 
</table>