Как выровнять два столбца текста в CSS

Question

У меня возникли проблемы с подбором текста. Мне нужно два столбца, один с цифрами и один с текстом, например:

1 вход один
2 входа два
3 Вступление три
4 Вступление пять
5 Въезд шесть

Левый столбец - Грузия, а правый - Arial (немного другой размер шрифта). Я мог бы иметь контейнер div для каждой строки и абсолютно позиционировать номер и текстовые абзацы, чтобы они были вверху или внизу, что прекрасно работает. Проблема в том, что это означает, что я должен задать каждой строке фиксированную высоту, чтобы она отображалась правильно, что вызывает проблему, если текст должен перетекать в более чем одну строку (что вполне может быть, поскольку текстовые записи являются динамическими). ​​

Я хочу сделать это без использования таблицы и без абсолютного позиционирования, чтобы отдельные текстовые записи могли занимать более одной строки (и кроссбраузерно-совместимы).

Answer 1

Согласно моему комментарию, я думаю, что лучшим элементом для работы является упорядоченный список .

ol {
   font-family: georgia, serif;
   font-size: 16px;
   font-weight: bold;
}
ol li span {
   font-family: arial, sans-serif;
   font-weight: normal;
   font-size: 12px;
}

<ol>
  <li><span>Entry one<br>text on another line</span></li>
  <li><span>Entry two</span></li>
  <li><span>Entry three</span></li>
  <li><span>Entry five</span></li>
  <li><span>Entry six</span></li>
</ol>

С диапазоном, позволяющим изменять font-family между списком "маркеры" и содержимым внутри, это может быть div, если у вас есть содержимое блока.

Answer 2

Вы должны просто использовать соответствующий стиль элемент ol, что-то вроде этого:

См .: http://jsfiddle.net/tPjQR/

Если вы хотите иметь разные стили для числа и содержимого списка, вам нужно обернуть содержимое каждого li в нечто вроде span. Там просто нет лучшего способа.

ol {
    font-family: Georgia, serif;
}
ol span {
    font-family: Arial, sans-serif;
    font-size: 17px
}
<ol>
    <li><span>Entry one</span></li>
    <li><span>Entry two</span></li>
    <li><span>Entry three</span></li>
    <li><span>Entry five</span></li>
    <li><span>Entry six</span></li>
    <li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>