css - 对齐字符

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 小提琴演示。

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>