<ol> list type not displaying when using CSS3 multi-column layout

Question

I'm using the CSS3 multi-column layout for an ordered list, but the list-numbers for the individual list-items's aren't being displayed in the second column.

Here's the JSFiddle.

Sample code is below.

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>

And CSS:

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

Answer 1

That's because the default padding on the ol allows for the numbers to be displayed. By default, they are displayed on the outside of the element, and since the second column doesn't have an padding, they aren't displayed.

You could position them on the inside by adding 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>

---

Alternatively, you could also use CSS3 counters and displaying the number on the li element using a pseudo element:

Example Here

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>