How to make a list horizontal in CSS?

The default rendering order of the list items is vertical which stacks the list item on top of another. Something like this:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

But that’s not always the case. As you might sometimes need to place these list items horizontally especially when are you creating a navbar. Something like this:

  • HTML
  • CSS
  • JavaScript
  • TypeScript

But how can you achieve this? Well, it’s quite simple and we can do this with a little CSS.

Let me first explain you why these list items stack in vertical order. The reason behind the vertical stacking order is the display property.

Each list item i.e. <li> by default renders as a block-level element. It means it has display property value as block which forces the list item to take up the full width of its parent element and results in a vertical rendering order. Something like this:

  • HTML
  • CSS
  • JavaScript
  • TypeScript

So, if you want to place the list items in a horizontal fashion, you have to change their default display behavior and which we can easily do with the display property.

All you need to do is set the display property value to inline or inline-block along with list-style-type: none;. Setting the list-style-type to none removes the default bullet points from the list items.

Here is a fully working example:

Example:

ul > li{
    display: inline-block;
}

If you are not much familiar with CSS lists, you can follow the CSS Lists tutorial. In this tutorial, we have explained everything about CSS lists in easy steps.