proper indenting for ordered lists in html

Question

I cannot get an ordered list to show proper indenting. The numbers are all aligned to the right. So the browser (Chrome) shows a space before the single digit numbers and only aligns the double digit numbers correctly to the left.

How can I output a nice ordered list where the numbers are all aligned to the left and the list items all start below each other?

Answer 1

If you don't mind using absolute positioning, this might work for you.

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

Note: If you've got anything appearing to the left of the <ol> element on your page (like a floating div), that content will move the numbers to the right, but not the acutal <li> content.

You could also use a whole different technique, with a different markup (nested div elements) with display:table and display:table-cell properties set. That would eliminate the issue with elements appearing on the left, but would require you to utilize the CSS counter property.

Answer 2

Actually, the solution is pretty simple, just set

ol {list-style-position: inside;}

And your numbers should "align to the left" like you want.