Как выровнять по двоеточия в каждой строке текста, например, в фильмах

Я хотел бы выровнять несколько строк текста о двоеточии в каждой строке. Поэтому у меня есть это:

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. Но я уверен, что есть гораздо более элегантные решения, чем это. - Любые идеи?

Спасибо!

Ответы

Ответ 1

Легким и семантическим способом было бы использовать список определений:

Демо

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>

Ответ 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 + любое дополнение или маржа.

Ответ 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/

Ответ 4

с произвольной длиной значения, таблица будет единственным способом сделать это