CSS li bullet does not show when li is inline-block

Question

When letting li to be inline-block, bullet points do not show anymore.

ul {
  list-style-type: circle;
}
ul.columns>li {
  display: inline-block;
  padding-right: 1cm;
  margin-left: 20px;
}

<h1>Vertical</h1>
<ul>
  <li><a class="openPage">Besoins en magnésium</a></li>
  <li><a class="openPage">Besoins en azote</a></li>
</ul>

<h1>Horizotal is missing bullets</h1>
<ul class="columns">
  <li><a class="openPage">Besoins en magnésium</a></li>
  <li><a class="openPage">Besoins en azote</a></li>
</ul>

See my fiddle http://jsfiddle.net/stephanedeluca/9xdkp3q7/2/

Answer 1

It's not the nicest way of doing it for sure. But I do recall this not really having any other conclusive outcome..

ul.columns>li:before { content:'\ffed'; margin-right:0.5em; }

EDIT: I understand the answer is already posted, but one uses absolute positioning and is less effective overall in my opinion and the other is over complicated also, not sure why relevant positioning is required on it? Plus the spacing is already sorted for you via this way. And it's only 2 attributes, simpler.

Answer 2

Bullet points or list style icons works only for display: list-item css property applied elements. This property is applied by default to the li elements, which you are overriding now by applying display: inline-block. Hence, the list style icons will be disappeared.

It seems you are trying to get the two li elements adjacent to each other. Well, in that case, you should definitely use display: inline-block. and then use pseudo class with display as list-item. That will solve your problem.

ul.columns>li:before{
    content: "";
    display: list-item;
    position: absolute;
}

Working Fiddle