How to Create a Horizontal List using CSS

Lists in HTML are useful because you can use them to display several pieces of related information.

However, by default, lists are rendered vertically, from top to bottom.

Sometimes you might want to display a list horizontally, from left to right, for example like for a menu of a website.

In this post, we'll learn how to display a list horizontally using CSS.

How to display a list horizontally using CSS

To start, first let's create a simple HTML list:

	<body>
    <h1>My Website</h1>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</body>

This will render like this:

HTML

<body> <h1>My Website</h1> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </body>
```
				
			
```

A quick way to display a list horizontally is to use the CSS property display: flex on the list's parent element.

Let's add a class to the parent to do that:

	<body>
    <h1>My Website</h1>
    <ul class="parent">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</body>

	.parent {
    display: flex;
}

That looks like this:

HTML
CSS

<body> <h1>My Website</h1> <ul class="parent"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </body>
```
				
			
```
.parent { display: flex; }
```
				
			
```

We can further improve the look of the list by adding a class to each item in the list and then styling them like this:

	<body>
    <h1>My Website</h1>
    <ul class="parent">
        <li class="child">Home</li>
        <li class="child">About</li>
        <li class="child">Contact</li>
    </ul>
</body>

	.parent {
    display: flex;
    list-style: none;
    padding: 0;
}

.child {
    background-color: #eee;
    padding: 0.5rem 0.75rem;
}

HTML
CSS

<body> <h1>My Website</h1> <ul class="parent"> <li class="child">Home</li> <li class="child">About</li> <li class="child">Contact</li> </ul> </body>
```
				
			
```
.parent { display: flex; list-style: none; padding: 0; } .child { background-color: #eee; padding: 0.5rem 0.75rem; }
```
				
			
```

As you can see, the list is now displayed horizontally and can be expanded on further to make it look like a navigation menu.

Conclusion

In this post, we learned how to display a list horizontally using CSS.

Simply add the CSS property display: flex to the parent element of the list and you're good to go, then style the list items as you wish.

Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!