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

Question

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 1

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.