如果ol列表是样式十进制属性消失

Question

我在样式div中有一个有序列表。造型后，enummeratin消失了。我该怎么办？

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 Fiddle demo

但是这种方法虽然有效，但却不必要地复杂，并且具有通常的跨浏览器问题。