数值列表一致的左对齐 [英] Consistent left-aligning of a numerical list

问题描述

如何确保数字列表中的所有内容都与同一位置对齐?您看到当您从#9转到#10时，编号如何获得额外的数字并将内容向右推动一点?我可以忍受#99至#100的麻烦，但我想解决#9至#10的问题.将编号放到外面可以使内容正确对齐，但是编号没有背景.

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;
    }

推荐答案

列表样式必须在此范围之外.

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

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

要解决您的背景问题，唯一的其他选择是在LI内使用另一个元素，该元素以预定的宽度放置 inline-block 并手动递增或使用表格.如果您的项目不依赖于向后兼容性，请告诉我，因为可能会有一些CSS3选项.

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.

这篇关于数值列表一致的左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！