Question

我想在每一行中对齐几行关于冒号的文本。所以我有这个：

aaa:111
bbbbbbb:22222
cccccccccc:33333333
dd:44
eeee:5555

我希望他们对齐结肠：

       aaa:111
   bbbbbbb:22222
cccccccccc:33333333
        dd:44
      eeee:5555

到目前为止，我可以使用一个表和两列来管理它，左列是text-align：right，右列是text-align left。但我确信有比这更优雅的解决方案。 - 有什么想法吗？

谢谢！

Answer 1

一种简单而语义的方法是使用定义列表：

Demo

CSS：

dt { display:block; float:left; width:100px; text-align: right;}
dt:after{content:':';}
dd { display:block;}

HTML：

<dl>
   <dt>aaa</dt><dd>111</dd>
   <dt>bbbbbbb</dt><dd>22222</dd>
   <dt>cccccccccc</dt><dd>33333333</dd>
   <dt>dd</dt><dd>44</dd>
   <dt>eeee</dt><dd>5555555</dd>
</dl>

Answer 2

<div class="label-wrap">aaa:</div>
<div class="info">111</div>

CSS：

.label-wrap
{
width:150px;
text-align:right;
float:left;
}

.info
{
width:150px;
float:left;
text-align:left;
}

你必须确保这两个类的包装在这里有足够的空间 - 300px +任何填充或边距。

Answer 3

如果您的数据是表格数据，那么您使用表格的方法是可以接受的。

然而另一种方法是使用HTML标签：

<p>
<span>aaa:</span>111
</p>
<p>
<label>bbbbbbb:</span>22222
</p>
<p>
<span>cccccccccc:</span>33333333
</p>

span
{
    width:100px;
    clear:left;
    float:left;
    text-align:right;
    padding-right:2px;
}

请参阅小提琴：http://jsfiddle.net/F2PRN/1/

Answer 4

具有任意值长度，表格是唯一的方法

如何在电影信用的每一行文本中对齐冒号经常这样做

4 个答案: