html - ol リストのスタイルが 10 進属性の場合、非表示になります

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(準拠しているブラウザーで) CSS 生成コンテンツを使用してリストマーカーを復元することもできます。

.box ol {
    counter-reset: listNumber;
}

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

JS フィドルのデモ。

しかし、このアプローチは機能しますが、不必要に複雑であり、通常のクロスブラウザーの問題があります.