How to create a horizontal list using HTML and CSS

In this post, we will learn how to create and display list items horizontally in CSS.

In HTML, to create any list of items we use the <ul> or <ol> tags, and all the list items are written inside the <li> tags. And this will render the list vertically on our web page. For example,

  <ul>
    <li>One</li>
    <li>two</li>
    <li>Three</li>
  </ul>

This will create a vertical list like this

Now, let’s say we need to create a navigation bar on our website and we need to display the list horizontally.

To do that we have three ways:

1. Using inline-block, and
2. Using flex-box
3. Using grid layout

Let’s check each method with an example

Using inline-block to display list horizontally

The inline-block property displays the element as an inline-level block container. So when an element is set as display:inline-block, we can set the height and width to it.

So, let’s say we have a list of page links for our navigation bar on the website.

 <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>

So make it horizontally aligned, we just need to set <li> to display:inline-block in our style sheet.

<style>
li{
  display:inline-block;
}
</style>

Now our links are displayed horizontally. We can add some background, width, and margin to make it look good too.

Output:

Using flex-box to align list items horizontally

To align the list horizontally using flex-box we just have to set the parent element as display: flex .

Here, the parent element is the <ul> element. So we just have to set it to display:flex and all the child elements i.e <li> tags will be displayed horizontally.

Example

  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>

And the CSS will be

ul{
  display:flex;
}

li{
  width: 80px;
  background: lightgreen;
  margin-right: 10px;
  list-style: none
}

The output will be like this

With flex-box we can also use other useful property like justify-content that helps us to properly give spaces between the child elements.

Example 1 – justify-content: space-between

Using justify-content: space-between in the parent element i.e the <ul> tag.

ul{
  display:flex;
  justify-content: space-between;
}

Output:

This will distribute the list items evenly, with space between each item. The first item is aligned left and the last item is aligned right.

Example 2: justify-content: space-around

Using justify-content: space-around in the parent element i.e the <ul>

tag.

ul{
  display:flex;
  justify-content: space-around;
}

Output:

With the CSS above, it will align horizontally like:

(space) Item 1 (space) Item 2 (space) Item 3 (space)

The spaces between each item are equal. And there is an equal space at the beginning before the first item and at the end after the last item.

This creates a nice even distribution with breathing room between the items. It’s useful for things like navigation menus, chips, tags, and other horizontal list layouts.

The space-around lets the child items be distributed in a line with equal spaces around them.

Read More about flex-box A Complete Guide to Flexbox | CSS-Tricks

Using grid to create a horizontal list in CSS

We can also use the grid layout to align list items horizontally. To do so we have to set the display:grid on the parent container (the <ul> or <ol> element).

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

This creates a grid with 3 columns of equal width using the fr unit.

The list items (the <li> elements) will automatically flow into these columns, aligning horizontally.

Some key points:

• Set the number of columns you want using grid-template-columns . Here since we have three list items we have used repeat(3, 1fr).
• The 1fr unit creates columns with equal width
• You can also use fixed width units like px

Read more about grid layout here : A Complete Guide to CSS Grid

Conclusion:

In conclusion, we can say that there are three main ways to align list items side-by-side horizontally in CSS:

Using display: inline-block – This displays the <li> items inline but allows setting widths and heights. However it has limitations in spacing control.

Using display: flex on the <ul> – This enables flexbox for easy horizontal alignment. Properties like justify-content distribute items with spacing.

CSS grid layout – This divides the space explicitly into columns and rows. The grid-template-columns property controls column widths. List items flow into these columns horizontally. Grid offers more rigid layout control than flexbox.

In summary, inline-block is the simplest approach, flexbox is the most flexible and powerful, and CSS grid allows defining explicit layout regions. The optimal method depends on the specific design and layout needs. But all three techniques are useful options to align list items horizontally.

Related Topics:

How to make a collapsible list in HTML without JavaScript