The ability to style inline lists in CSS is a very useful and powerful feature whether this is for styling a list of tags, a list of links for a navigation breadcrumb or a list a menu items. It could be done in HTML but it’s easier to design with a few CSS properties.

HTML structure

Instead of a badly structured HTML like this:

<!-- Don’t do this -->  
<div>  
    <a href="#">lorem</a>
    <a href="#">ipsum</a>
    <a href="#">dolor</a>
</div>  

This is better to use a true HTML list which is much better for accessibility and for SEO. This gives a true structure to an HTML document:

<ul class="list-inline">  
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
</ul>  

Making lists linear in CSS

Let’s make a list-inline generic class for inline lists. This will display a list with its items on the same line instead of each on a new line.

.list-inline {
    list-style: none;
    padding: 0;
}

.list-inline > li {
    display: inline;
}

The .list-inline > li selector returns the direct children of the <ul class="list-inline"> container. This is useful when we have nested lists to avoid targeting all the nested elements.

List elements separated by middle dots

These dots are purely decorative separators and not real content. So let’s display them with a few CSS properties instead of modifying the HTML structure. About the middle dot character: https://en.wikipedia.org/wiki/Interpunct. This kind aof list may be used to display a list of tags.

Add the list-middot class to our previous list thanks to multiple classes in CSS:

<ul class="list-inline list-middot">  
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
</ul>  

And for the CSS part:

.list-middot > li:not(:last-child)::after {
    content: "·";
}

To avoid any character encoding issues or copy and paste errors we may use the hexadecimal value of the character:

.list-middot > li:not(:last-child)::after {
    content: "\00b7";
}

The :not(:last-child) selector reduces the direct children list item elements to all of them minus the last one. And the ::after selector adds a pseudo element after the selected element.

Styling a list with the pipe character

Another example where the list elements are separated by a pipe character |. It could be a list of links in the footer of a website for example.

The HTML structure is the same:

<ul class="list-inline list-pipe">  
    <li>
        <a href="#">lorem</a>
    </li>
    <li>
        <a href="#">ipsum</a>
    </li>
    <li>
        <a href="#">dolor</a>
    </li>
</ul>  

And for the CSS part:

.list-pipe > li:not(:last-child)::after {
    content: "|";
    margin: 0 .25em;
}

Styling a breadcrumb navigation

Here I’m going to use a bracket character as a separator. A nice place to copy and paste it: https://en.wikipedia.org/wiki/Bracket.

And I won’t reuse the list-inline class. Instead I will use a standalone breadcrumb class:

<ul class="breadcrumb">  
    <li>
        <a href="#">Lorem</a>
    </li>
    <li>
        <a href="#">Ipsum</a>
    </li>
    <li>
        <span>Amet</span>
    </li>
</ul>  

And for the CSS side:

.breadcrumb {
    list-style: none;
    padding: 0;
}

.breadcrumb > li {
    display: inline;
}

.breadcrumb > li:not(:last-child)::after {
    content: "›";
    margin: 0 .25em;
}

To avoid any character encoding issues or copy and paste errors we may use to hexadecimal value of the character:

… {
    content: "\203a";
}

Demo

Here’s the preview, if you want to play with the code the demo is here on CodePen.

See the Pen Styling Inline Lists in CSS by Frédéric Perrin (@blustemy) on CodePen.