How to make horizontal list in HTML using CSS

Have you started hacking with CSS recently and wanted to display a list or menu in a horizontal fashion? Then you are at the right place. In this article, we will explore different ways to display a horizontal list in HTML.

Project setup

Below will be the HTML code we will be using throughout this article:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Horizontal List</title>
5    <style></style>
6  </head>
7  <body>
8    <ul>
9      <li><a href="/">Home</a></li>
10      <li><a href="/pricing">Pricing</a></li>
11      <li><a href="/blog">Blog</a></li>
12      <li><a href="/about">About</a></li>
13    </ul>
14  </body>
15</html>

The above HTML will render the page as shown below:

Using display inline

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Horizontal List</title>
5    <style>
6      li {
7        display: inline-block;
8      }
9    </style>
10  </head>
11  <body>
12    <ul>
13      <li><a href="/">Home</a></li>
14      <li><a href="/pricing">Pricing</a></li>
15      <li><a href="/blog">Blog</a></li>
16      <li><a href="/about">About</a></li>
17    </ul>
18  </body>
19</html>

If you add display:inline-block style as shown below, the items will be aligned next to each other:

Let's add some styling to the menu:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Horizontal List</title>
5    <style>
6      li {
7        display: inline-block;
8        padding: 1rem;
9      }
10      li a {
11        color: white;
12        text-decoration: none;
13      }
14      li a:hover {
15        color: #333;
16      }
17      ul {
18        background: teal;
19        margin: 0;
20        text-align: center;
21      }
22    </style>
23  </head>
24  <body>
25    <ul>
26      <li><a href="/">Home</a></li>
27      <li><a href="/pricing">Pricing</a></li>
28      <li><a href="/blog">Blog</a></li>
29      <li><a href="/about">About</a></li>
30    </ul>
31  </body>
32</html>

If you run the code now, you will get:

Using display flex

We can make the ul element flex to align the menu horizontally:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Horizontal List</title>
5    <style>
6      ul {
7        display: flex;
8      }
9      li {
10        list-style-type: none;
11        padding: 1rem;
12      }
13      li a {
14        color: white;
15        text-decoration: none;
16      }
17      li a:hover {
18        color: #333;
19      }
20      ul {
21        background: teal;
22        margin: 0;
23        text-align: center;
24        padding-left: 0;
25      }
26    </style>
27  </head>
28  <body>
29    <ul>
30      <li><a href="/">Home</a></li>
31      <li><a href="/pricing">Pricing</a></li>
32      <li><a href="/blog">Blog</a></li>
33      <li><a href="/about">About</a></li>
34    </ul>
35  </body>
36</html>

Using grid

You can use the CSS grid as shown below to align the items horizontally:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Horizontal List</title>
5    <style>
6      ul {
7        display: grid;
8        grid-template-columns: auto auto auto auto;
9      }
10      li {
11        list-style-type: none;
12        padding: 1rem;
13      }
14      li a {
15        color: white;
16        text-decoration: none;
17      }
18      li a:hover {
19        color: #333;
20      }
21      ul {
22        background: teal;
23        margin: 0;
24        text-align: center;
25        padding-left: 0;
26      }
27    </style>
28  </head>
29  <body>
30    <ul>
31      <li><a href="/">Home</a></li>
32      <li><a href="/pricing">Pricing</a></li>
33      <li><a href="/blog">Blog</a></li>
34      <li><a href="/about">About</a></li>
35    </ul>
36  </body>
37</html>

Do follow me on twitter where I post developer insights more often!

How to make horizontal list in HTML using CSS

Table of Contents

Project setup

Using display inline

Using display flex

Using grid

Related Articles

Leave a Comment

Tools