一致的左对齐数字列表

Question

如何确保数字列表中的所有内容都保持对齐到同一位置？你看到当你从＃9到＃10时，编号会得到一个额外的数字，并将内容向右推一点？我可以忍受＃99到＃100搞砸了，但我想解决这个＃9到＃10的问题。将编号移到外面会使内容正确对齐，但编号没有背景。

#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

列表样式需要在外面才能实现。

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

修复背景问题的唯一另一个选择是使用LI中放置预定义宽度的inline-block内的另一个元素并手动增加或使用表格。如果您的项目不依赖于向后兼容性，请告诉我，因为可能有一些CSS3选项。