Question

How do you make sure all the content in a numerical list is left aligned to the same spot? You see how when you go from #9 to #10, the numbering gets an extra digit and pushes the content a little bit to the right? I can live with #99-to-#100 screwing things up, but I’d like to fix this #9-to-#10 issue. Making the numbering go outside makes the content align properly, but then there’s no background on the numbering.

#file ol {
    line-height: 3em;
    font-size: 1.2em;
    color: #999;
}

    #file ol li {
        list-style: decimal inside none;
        padding: 0 0 0 1em;
    }

    #file ol li.alt {
        background: #eee;
    }

Answer 1

The list style needs to be outside for this to happen.

#file ol li {
    list-style: decimal outside none;
    padding: 0 0 0 1em;
}

The only other option, to fix your background issues, would be to use another element inside the LI that you place inline-block with a predefined width and manually increment or to use a table. If your project does not rely on backwards compatability, please let me know as there may be some CSS3 options.