mattstuehler mattstuehler - 4 years ago 92
CSS Question

CSS ordered list - style the number, when li contains multiple lines, maintaining indentation

Variants of this question have been asked and answered, but I can't find an answer to this specific question...

I would like to style the number in each

li
item in my
ol
, given that each
li
may span multiple lines, in a way that maintains the indentation.

For example - here is a simple, un-styled example:



<div style="width: 200px;">
<ol>
<li>blah blah blah blah blah blah blah blah blah blah</li>
<li>blah</li>
<li>blah blah blah blah blah blah blah blah blah blah</li>
<li>blah</li>
</ol>
</div>





This produces the following result - note the proper indentation of multiple lines:

enter image description here

I've tried styling the numbers using
li:before
:



ol {
counter-reset: li;
list-style: none;
}
li {
counter-increment: li;
}
li:before {
margin-right: 10px;
content: counter(li) '.';
width: 1.2em;
display: inline-block;
}

<div style="width: 200px;">
<ol>
<li>blah blah blah blah blah blah blah blah blah blah</li>
<li>blah</li>
<li>blah blah blah blah blah blah blah blah blah blah</li>
<li>blah</li>
</ol>
</div>





Now, I can easily style the numbers, but the indentation on multiple lines is lost:

enter image description here

So, how can I style the numbers, and maintain proper indentation?

Answer Source

You can also update the display: to use the table values.

The table-row value makes the element act like a <tr> and the table-cell makes the element act like a <td> ensuring that the different parts of the list stay aligned.

ol {
  counter-reset: li;
  list-style: none;
}
li {
  counter-increment: li;
  display:table-row;
  
}
li:before {
  margin-right: 10px;
  content: counter(li) '.';
  width: 1.2em;
  display: table-cell;
}
<div style="width: 200px;">
  <ol>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
  </ol>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download