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

css, html

Solution

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.

Problem

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/

Original source