Horizontal Bulleted Lists Using  CSS

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.


.list-horizontal li {
.list-horizontal li:before {
  content: '\00a0\2022\00a0\00a0';
.list-horizontal li:first-child:before {
  content: '';


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

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.

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 16 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.