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>

If you have liked article, do follow me on twitter to get more real time updates!

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