CODEWITHSUNDEEP
html
user2580777
user2580777

Reputation: 79

If ol list is styled decimal attribute disappears

I have a ordered list inside a styled div. After styling the enummeratin disappears. What can I do?

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;
}

Upvotes: 0

Views: 89

Answers (2)

David Thomas
David Thomas

Reputation: 253318

While you've accepted an answer, it's worth noting that, If you need the list items to be display: block, then you can (in compliant browsers) also use CSS generated content to restore the list-markers:

.box ol {
    counter-reset: listNumber;
}

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

JS Fiddle demo.

But this approach, while it works, is needlessly complex and has the usual cross-browser issues.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174977

That's because of the display: block;. If you want to have the bullets (or numbers), don't set display: block, or do set display: list-item.

Upvotes: 4

Related Questions