如何像电影字幕那样在每行文本中围绕冒号对齐

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

​

* {
  margin: 0;
  padding: 0;
}

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

dt:after {
  content: ':';
}

dd {
  display: block;
}

<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

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

​

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

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

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

​

Answer 3

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

但是，另一种方法是使用HTML跨度：

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

​

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

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

​