Creating inline lists

Yesterday, we looked at how to create unstyled lists with CSS. Today, let’s look at how to create inline lists.

We’re halfway there

We can actually take our code from yesterday, copy/paste it, and use it as a starting point.

Let’s rename our class .list-inline.

<ul class="list-inline">
	<li>Neville</li>
	<li>Hermione</li>
	<li>Harry Potter</li>
	<li>Dumbledore</li>
</ul>

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

/**
 * @bugfix Prevent webkit from removing list semantics
 * https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.list-inline > li:before {
	content: "\200B"; /* 1 */
	position: absolute; /* 2 */
}

Making the list “inline”

First, lets take the list items and make them inline-block.

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

Here’s what that looks like.

It’s a good start, but we want more control over the spacing between each item.

Let’s add a negative margin to the left and right of our list. I’m using half an em, but use whatever value you’d like.

.list-inline {
	list-style: none;
	margin-left: -0.5em;
	margin-right: -0.5em;
	padding-left: 0;
}

Then, we’ll add that same margin as a positive number to the left and right of our list items.

.list-inline > li {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

Here’s an updated demo.

To change the spacing, change that 0.5em number in both places.