Why does the list style disappear when display: bl

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.

Answer 2

An updated solution is to make use of :before and content.

See this JSfiddle for a working example. http://jsfiddle.net/t72h3/

ul li {
  display: inline-block;
}

ul li:before {
  content: "• ";
}

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

Answer 3

Solution for ul

ul {
    list-style: none;
    display: block;
    padding: 0;
}

ul li::before {
  content: "• ";
}

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

Solution for ol using counter-increment

ol {
    list-style: none;
    display: block;
    padding: 0;
    counter-reset: my-counter;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
}

<ol>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ol>

Answer 4

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

<ol>
  <li>
    <div class="list-item-content">Some text</div>
  </li>
</ol>

Answer 5

A way to get the effect would be:

<ol>
    <li>
        <a href="mylink">desc</a>
    </li>
</ol>

CSS:

li {
    list-style-position: inside;
    display: inline-block; /* or block */
}

li a {
    display: list-item;
    padding: 10px 20px;
}