Skip to content
html

How to make horizontal list in HTML using CSS

Oct 11, 2022Abhishek EH2 Min Read
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:

basic setup

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:

display inline

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:

display inline decorated

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!

Leave a Comment

© 2024 CodingDeft.Com