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

Question

This seems to valid for display: inline; and display: inline-block; too.

This is what I mean:

ul li {
  display: block;
  /         


        

Answer 1

Martin's answer is true but doesn't provide a solution and Pappy's is only relevant if you want bullets or easily have access to the what the li's identifier will be. In my case, I need to have an ol with upper-alpha so that's not possible.

The shortest way around this for us was to put a an inline (inline, inline-block, inline-flex) property as well as vertical-align: top on the immediate child of the li:

ol {
  list-style: upper-alpha;
  
  > li {
    display: block;
  }
}

.list-item-content {
  display: inline-block; // any inline property will work
  vertical-align: top;
}

  

    
Some text