css - 如何像电影演职员表一样在每行文本中对齐冒号

Question

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

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

我希望它们围绕冒号对齐:

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

到目前为止，我可以用一个表和两列来管理它，左列文本对齐:右，右列文本左对齐。但我非常确定还有比这更优雅的解决方案。 -- 有什么想法吗？

谢谢!

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>