css - 如何在内联有序列表中显示数字？

Question

我有一个列表:

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

它可以很好地显示十进制数，但是当我设置 <li> 时内联或内联 block ，数字消失了!我在网上看到其他地方提到我必须确保我有足够的边距和填充。而且我确定我会这样做(每个 10 像素!)是否有其他原因导致数字可能消失？我从 Firebug 知道，一旦我取消选中 inline他们回来了。

CSS 是:

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

Answer 1

我不知道为什么会这样，但是可以通过向左浮动而不是display: inline

来解决

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

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

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