html - 如果 ol 列表样式为十进制属性消失

Question

我在样式化的 div 中有一个有序列表。造型后，枚举消失。我能做些什么？

HTML

<div class="box">
  <ol>


    <li>.....</li>
            <li>.....</li>

  </ol>
</div>

CSS

 .box ol{
list-style-type: decimal;
}

.box ol li{
display: block;

margin: 20px 0 10px 0;
}

Answer 1

那是因为display: block;. 如果您想要项目符号（或数字），请不要设置display: block或设置display: list-item。

Answer 2

虽然您已经接受了答案，但值得注意的是，如果您需要列表项是display: block，那么您也可以（在兼容的浏览器中）使用 CSS 生成的内容来恢复列表标记：

.box ol {
    counter-reset: listNumber;
}

.box ol li::before {
    counter-increment: listNumber;
    content: counter(listNumber, decimal);
}

JS 小提琴演示。

但是这种方法虽然有效，但过于复杂，并且存在通常的跨浏览器问题。