How to make a horizontal list using CSS?

The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS.

In this post, I will explain & show a couple of ways to create a horizontal list with CSS.

Let’s get started.

Different ways to create a horizontal list with CSS

In these examples, you will see different CSS properties that can be used to make a horizontal list, such as display, flex, float, etc.

Throughout this post, I will use the following HTML for the list items until I introduce a new markup.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Grapes</li>
  <li>Mangoes</li>
</ul>

So keep that in mind.

Using display: inline

ul li {
  display: inline;
}

Only with the above line of CSS, you can make a horizontal list.

Output

• Apples
• Bananas
• Oranges
• Grapes
• Mangoes

But the items are touching each other, so you need to add some space between them. You can use margin, padding, or both to add space. In the example below, I added a 20px margin to the right side.

• Apples
• Bananas
• Oranges
• Grapes
• Mangoes

Using display: flex

• Apples
• Bananas
• Oranges
• Grapes
• Mangoes

The next method is using Flexbox. Here, you need to apply display: flex for the container element <ul>. See my CSS below.

ul {
  display: flex;
}
ul li {
  list-style: none;
  margin-right: 20px;
}
ul li:last-child {
  margin-right: 0;
}

You saw the output above.

Using CSS float

• Apples
• Bananas
• Oranges
• Grapes
• Mangoes

In this example above, I used the CSS float to the left. However, you need to clear the floats after using this property. Otherwise, the next content may mess up with it.

See my CSS below.

ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
}
ul li:last-child {
  margin-right: 0;
}
/* for clearing the float */
ul::after {
  content: "";
  clear: both;
  display: table;
}

Horizontal ordered list

Up until this section, we have worked with the unordered list <ul> so far. But you can use the same tactic on the ordered <ol> list as well.

Please consider a new HTML for this explanation, as you can see below.

<ol>
  <li>Buy apples</li>
  <li>Eat banana</li>
  <li>Make orange juice</li>
  <li>Purchase garapes</li>
  <li>Climb mango tree</li>
</ol>

See its output (without CSS) below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

You can use any of the previous approaches to align them horizontally. Let me apply the first (display: inline) method.

ol li {
  display: inline;
  margin-right: 20px;
}
ol li:last-child {
  margin-right: 0;
}

See the output below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

The list numbers (1, 2, 3…) disappeared after I aligned them horizontally. But if you want to keep the ordered list numbers, you have to reset the counter, as you see in my CSS below.

ol {
  counter-reset: list-counter;
}
ol li {
  display: inline;
  margin-right: 20px;
  padding-left: 20px; /* this is required to position the numbers */
  counter-increment: list-counter; /* required */
  position: relative; /* required */
}
ol li:last-child {
  margin-right: 0;
}
ol li:before {
  content: counter(list-counter) ".";
  display: inline;
  position: absolute; /* required */
  left: 1px; /* required */
}

See the latest output below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

List related posts:

1. How to make a horizontal list using CSS?
2. How to create a two-column list in HTML CSS?

Build HTML CSS projects

Conclusion

Now you know how to align an ordered & unordered list horizontally. I gave you a couple of examples and CSS for the horizontal list. If you are still confused, let me know.

Using these same technics, you can create a horizontal navigation menu. But you need a few lines of JavaScript to make the menu bar responsive.