如何在内联有序列表上显示数字？ [英] How can I show numbers on an inline ordered list?

问题描述

我有一个列表：

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

显示十进制数字很好，但是当我设置< li> ; 内联或内联阻止，数字消失了！我在网上看到其他地方提到必须确保有足够的边距和填充。并且我确定我会这样做（每个像素10像素！）还有其他原因可能导致数字消失吗？我从Firebug中知道，只要取消选中 inline ，它们就会回来。

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 inline they come back.

CSS是：

ol {
  padding: 20px;
  list-style-type: decimal;
}
ol li {
  display: inline;
  margin: 0 10px;
  padding: 0 10px;
}

推荐答案

我不知道为什么发生这种情况，但是可以通过向左浮动而不是 display来解决：内联

I don't know why this happens, but it can be solved by floating left instead of display: inline

请参见 https://jsfiddle.net/CMKzK/

ol {
    padding: 20px; 
    list-style-type: decimal;

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}

这篇关于如何在内联有序列表上显示数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！