ムービークレジットのようなテキストの各行にコロンを整列させる方法はありますか

Question

各行にコロンについてのテキストをいくつか整列させたいと思います。 、右：

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

は、これまでのところ、私はテーブル2列、左の列のテキストを整列して、それを管理することができます：私は彼らがコロンについて整列する

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

：だから私はこれを持っています右側の列はテキストの左揃えになります。しかし、私は確かにこれよりもはるかにエレガントな解決策があると確信しています。 - 何か案は？

ありがとうございます！任意の値の長さを持つ

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

、テーブルが

Answer 3

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

をあなたはどのようなこれらの2つのクラスをラップすると、ここに十分なスペースを持っていることを確認する必要があります - 300px +任意のパディングまたはマージン。

Answer 4

データが表形式のデータの場合は、表を使用するアプローチが容認されます。

しかし代替は、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/