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 for it.

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 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 among those items. You can use margin, padding, or both to add space. In the below example, 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, it’s very important to know that you need to clear the floats after using them. 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 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 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

To align them horizontally, you can use any one of the previous approaches. 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. HTML ul tag & list items (practical use cases & examples)
2. How to make a horizontal list using CSS?
3. How to center align an HTML list using CSS?
4. 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 still have any confusion, 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.