Search code examples
htmlbrowsermultiple-columnslistitem

Rendering of list item marker when in column

Chrome does not number list items when the list is displaied in several columns.

<!DOCTYPE html>
<html>
<head>
<title>Testing li number in column</title>
</head>
<body>
<ol style="column-count:3">
<li>This is item 1.</li>
<li>This is item 2.</li>
<li>This is item 3.</li>
<li>This is item 4.</li>
<li>This is item 5.</li>
</ol>
</body>
</html>

Above code is interpreted without numbering list items except in the first column.

Is there another way to do to get the expected rendering (all items numbered) ? Thank you

Solution

  • You need to add a bit of CSS to make the default style position inside. Try:

    li {
  list-style: inside decimal;
}