Question

在我的联系信息中，我有几行看起来像这样。

Phone: 123 456
Web site: page.eu

我想在分号上创建一个垂直对齐方式。我认为，一种方法是使用两个不同的div，将它们浮动到左边，将一个的内容设置为右对齐，另一个设置为左对齐。但是有一种更简洁的方式吗？

Answer 1

固定宽度浮动div或表（但不要吹嘘它，因为这不是最佳做法）

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

Answer 2

鉴于这似乎是一个联系信息列表，我建议先使用list-element，然后使用两个spans来包含和对齐文本：

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

对齐一个角色

3 个答案: