数字列表的一致左对齐

Question

如何确保数字列表中的所有内容都左对齐到同一个位置？你看到当你从 #9 到 #10 时，编号会得到一个额外的数字并将内容推到右边一点吗？我可以忍受 #99-to-#100 搞砸了，但我想解决这个 #9-to-#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 选项。