对齐字符

-1

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

Phone: 123 456 
Web site: page.eu

我想创建一个垂直对齐分号。我认为一种方法是使用两个不同的div，将它们浮动到左侧，并将其中一个的内容右对齐，另一个将左对齐。有没有更好的方法呢？

来源

2012-08-04 Konrad Viltersten

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

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

来源

2012-08-04 14:02:17 Samson

由于最终会出现不灵活的四方形布局，因此表格会皱眉。如果您希望将数据放在网格中，那么他们就是正确的工具。 – stark 2012-08-04 14:30:01

鉴于这似乎是联系人信息列表，我建议首先使用列表元素，然后两个跨遏制，并对齐，文本：

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

来源

2012-08-04 14:03:00

示例中没有分号（;）;我认为你的意思是冒号（:)。你所拥有的是一张数据表，所以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>

来源

2012-08-04 14:48:52

当然。我的意思是冒号。自从过去被滥用作为CSS的替代品以来，我原则上避免使用表格。但是你实际上在做出一个非常引人注目的案例。我想我可以用桌子。 – 2012-08-04 16:52:51

回答

相关问题