Fredrik Fredrik - 6 days ago 6
CSS Question

Why does the list style disappear when display: block is added to a list item in a list (<ul> or <ol>)?

This seems to valid for

display: inline;
and
display: inline-block;
too.

This is what I mean:

ul li {
display: block;
/* Or display: inline; */
/* Or display: inline-block; */
}

<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>


And with list style I mean the actual "bullets" or "numbers" (when
<ol>
is used)

Answer

That's because normally, display is set to list-item for <li> elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.

To declare a list item, the ‘display’ property should be set to ‘list-item’.

Note that you can give arbitrary HTML elements the same behaviour; set display: list-item on a <div> for example.