How to create a horizontal list using HTML

Posted on Aug 10, 2021

Learn how to create a horizontal list using HTML

By default, the HTML <ul> list will be rendered vertically with one list item on top of another.

When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list.

The following example code:

<body>
  <h2>Welcome to my website</h2>
  <ul>
    <li style="display:inline">Home</li>
    <li style="display:inline">About</li>
    <li style="display:inline">Blog</li>
  </ul>
</body>

Will produce the following output:

You may also want to remove the default 40px padding style for the <ul> tag to let the list elements take the full width of the page:

<body>
  <h2>Welcome to my website</h2>
  <ul style="padding-left:0px">
    <li style="display:inline">Home</li>
    <li style="display:inline">About</li>
    <li style="display:inline">Blog</li>
  </ul>
</body>

A horizontal list is commonly used for creating a website’s navigation menu component. If you want to create a reusable navigation component, then you need to separate the CSS from the HTML document.

The following CSS code style will transform your <ul> element into a navigation bar component:

ul.nav {
  padding-left: 0px;
  background-color: #3D99CE;
  text-align: center;
}
ul.nav > li {
  display: inline-block;
  padding: 10px 20px;
}
ul.nav > li:hover {
  background-color: #2779BF;
}
ul.nav > li > a {
  color: white;
  text-decoration: none;
}

To use the CSS style above, you only need to add the nav class to the <ul> tag:

<h2>Welcome to my website</h2>
<ul class="nav">
  <li><a href="/home">Home</a></li>
  <li><a href="/home">About</a></li>
  <li><a href="/blog">Blog</a></li>
</ul>

The HTML output will be as shown below:

And that’s how you can create a horizontal list using HTML and CSS 😉

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.