Тип списка<ol> не отображается при использовании многостолбцовой разметки CSS3

Question

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

Вот JSFiddle.

Пример кода ниже.

HTML

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol>

И CSS:

ol {
    -moz-column-count 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Answer 1

Это потому, что по умолчанию padding на ol позволяет отображать числа. По умолчанию они отображаются снаружи элемента, а поскольку второй столбец не имеет отступов, они не отображаются.

Вы можете расположить их внутри, добавив list-style-position: inside:

ol {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  list-style-position: inside;
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

---

Кроме того, вы можете также использовать счетчики CSS3 и отображать число на li элемент с использованием псевдоэлемента:

Пример здесь

ol {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  list-style: none;
  padding-left: 0;
}

ol {
  counter-reset: list;
}
li:before {
  counter-increment: list;
  content: counter(list) ". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>