CSS li bullet not showing when li is inline-block
If you allow li to be inline-block, marker points are no longer displayed.
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/
source to share
This is not the nicest way to do it for sure. But I do remember that there wasn't really another convincing result.
ul.columns>li:before { content:'\ffed'; margin-right:0.5em; }
EDIT: I understand that the answer has already been posted, but one uses absolute positioning and is less efficient in my opinion, and the other is too complicated, not sure why it requires proper positioning on it? Also, the interval is already sorted for you this way. And these are just 2 attributes, easier.
source to share
Label or list style icons only work for display: list-item
css elements . This property applies by default to the elements li
that you are now overriding by applying display: inline-block
. Hence the list style icons will disappear.
You seem to be trying to get two li elements adjacent to each other. Well, in this case you should definitely use display: inline-block
. and then use a pseudo class with display like list-item
. This will solve your problem.
ul.columns>li:before{
content: "";
display: list-item;
position: absolute;
}
source to share
When you first create the list, the default is display
set to list-item
. When you change it to display: inline-block;
, it is no longer considered a list item.
Here are some sites that have good listing information:
source to share
You can manually add markers to the :before
: psuedo element .
* {
font-family: sans-serif;
}
ul {
list-style-type: circle;
}
ul.columns>li {
display: inline-block;
padding-right: 1cm;
margin-left: 20px;
}
ul.columns>li:before {
content: '◦';
position: relative;
font-size: 1.3em;
font-weight: bold;
top: 1px;
left: -3px;
}
<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>
source to share