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

Actually, the solution is pretty simple, just set

ol {list-style-position: inside;}

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

Answer 2

Late to the party but I've just been wrestling with this problem myself and ended up using this combo which adds a zero before any single digit list items:

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}