CSS 如何在内联有序列表上显示数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4643913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show numbers on an inline ordered list?
提问by Damon
I have a list:
我有一个清单：
<ol>
<li>Login</li>
<li>Address</li>
<li>Shipping</li>
</ol>
It shows the decimal numbers fine, but when I set the <li>to inline or inline-block, the numbers vanish! I saw other places online mentioned that I have to ensure I have enough margin and padding. and I am sure that I do (10px of each!) Is there some other reason the numbers might be disappearing? I know from firebug that as soon as I uncheck inlinethey come back.
它显示十进制数字很好，但是当我将 设置<li>为 inline 或 inline-block 时，数字消失了！我在网上看到其他地方提到我必须确保我有足够的边距和填充。而且我确信我这样做了（每个 10 像素！）数字可能会消失还有其他原因吗？我从萤火虫那里知道，一旦我取消选中inline它们就会回来。
The CSS is:
CSS是：
ol {
padding: 20px;
list-style-type: decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}
采纳答案by Eric Fortis
I don't know why this happens, but it can be solved by floating left instead of display: inline
我不知道为什么会发生这种情况，但是可以通过向左浮动而不是向左浮动来解决 display: inline
See https://jsfiddle.net/CMKzK/
ol {
padding: 20px;
list-style-type: decimal;
}
ol li {
float: left;
margin: 0 10px;
padding: 0 10px;
}
回答by nico
You can try this:
你可以试试这个：
ol
{
/* List will start at 25 + 1 = 26 */
/* Remove the 25 if you want to start at 1 */
counter-reset: LIST-ITEMS 25;
}
li
{
display: inline;
padding-right: 0.5em;
}
li:before
{
content: counter( LIST-ITEMS ) ".";
counter-increment: LIST-ITEMS;
padding-right: 0.25em;
font-style: italic;
font-weight: bold;
}<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
<li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>回答by zzzzBov
If you don't care about old versions of IE, you can use automatic counters and numbering
如果你不关心旧版本的IE，你可以使用自动计数器和编号
Otherwise you should specify the numbers manually (@Babiker's solution), or floatyour li's (@Eric Fortis' solution).
否则，您应该手动指定数字（@Babiker 的解决方案）或float您li的（@Eric Fortis 的解决方案）。
回答by hedgehog
I've gotten around the problem of ol numbers getting pushed around by left-floating elements with the following:
我已经解决了 ol 数字被左浮动元素推动的问题，如下所示：
li {
overflow:hidden;
list-style-position: inside;
display:block;
}
.number {
display:list-item;
position:absolute;
}
.first-item {
float:left;
/* revise margin to your needs */
margin-left:35px;
}
.second-item {
float:left;
}
given the following DOM:
给定以下 DOM：
<ol id="playlist">
<li>
<div class="number"></div>
<a class="first-item" href="#">click here</a>
<div class="second-item">some detail</div>
</li>
</ol>
seems to work with inline-block elements as well.
似乎也适用于内联块元素。
