If you want to create an unordered list in HTML (<ul>
) that lists items horizontally while maintaining the bullets this bit of code should help you. This method is more flexible than display: inline
, display: inline-block
or float: left
, allowing you to control the styles used for the bullet.
CSS
.list-horizontal li {
display:inline-block;
}
.list-horizontal li:before {
content: '\00a0\2022\00a0\00a0';
color:#999;
color:rgba(0,0,0,0.5);
font-size:11px;
}
.list-horizontal li:first-child:before {
content: '';
}
HTML
<ul class="list-horizontal">
<li>Inline list item #1</li>
<li>Inline list item #2</li>
<li>Inline list item #3</li>
<li>Inline list item #4</li>
<li>Inline list item #5</li>
</ul>
The last CSS selector will remove a bullet from the first item, which is ideal in for design in some circumstances. If you want the first item to include a bullet just remove the .list-horizontal li:first-child:before
styles.