Let’s align the “li” elements of the list horizontally using CSS!

When you’ve created lists in HTML, you’ve probably wanted to create something more fancy.
In this article, I’ll show you how to use CSS to align list “li” elements horizontally for a cleaner layout.

basic list

Let’s check how to write a basic list using HTML.

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

“・” is automatically added to the beginning, and it feels like a list, but I want to display it more beautifully.
CSS makes that possible.

How to realize list elements side by side

There are two typical ways to align lists horizontally with CSS.

・Use “Flexbox”
・Use “float” property

Method 1: Using “Flexbox”

“Flexbox” is a simple way to achieve horizontal alignment using CSS.
Flexbox is a CSS feature introduced in CSS3, and it is very convenient because it allows you to freely manipulate the arrangement of elements.

First, let’s start with the simplest code for horizontal alignment using flexbox.

CSS

ul {
  display: flex;
  list-style: none;
}

HTML

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ブドウ</li>
  <li>キウイ</li>
</ul>

Declare Flexbox with “display: flex;” and remove the leading “・” with “list-style: none;”.

However, just arranging them like this is cramped because there is no margin.
Let’s put a margin when lining up horizontally.

ul {
  display: flex;
  list-style: none;
}

ul li {
  margin-left: 1em;
}

In this sample, a margin of 1em (one character) is added on the left side.
It’s fine for simple lists, but if you want to put decorations outside the list as well

ul li {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

and left and right for a balanced display.

Method 2: Use the “float” property

The method used before CSS3 is to set “float: left”.
Also check the sample.

CSS

ul {
  list-style: none;
}

ul li {
  float: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

HTML

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ブドウ</li>
  <li>キウイ</li>
</ul>

Note that unlike “Flexbox” you set it to the “li” element instead of the “ul” element .

When dealing with elements outside the list

At first glance, the two methods seem to achieve the same display, but they behave differently when another element enters after the list.

HTML

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ブドウ</li>
  <li>キウイ</li>
</ul>
<p>次の要素</p>

Let’s check the behavior when the “p” element comes in after the list like this.

For “Flexbox”

CSS

ul {
  display: flex;
  list-style: none;
}

ul li {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

For “float: left”

CSS

ul {
  list-style: none;
}

ul li {
  float: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

“float: left” also lined up “p” elements outside the list side by side.
Due to the specification, the elements after the list will be displayed side by side, so it may be an unexpected array like this.

To avoid this, you need to clear the “float” setting on the “p” element.
By rewriting to the following CSS, it is possible to display the same as “Flexbox”.

CSS

ul {
  list-style: none;
}

ul li {
  float: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

p {
  clear: left; 
}

Which method is better to use

There are two ways to handle the list side-by-side, both of which can be displayed in the same way.
So, in order to decide which one to choose when actually using it, I would like to list the advantages and disadvantages of each.

1. “flexbox”

merit

・High degree of freedom
・No other elements involved

Demerit

・Does not work properly with browsers that do not support CSS3 (especially Internet Explorer)

2. “float: left”

merit

・Works even with browsers that do not support CSS3

Demerit

・”clear: left” is essential because it involves other elements

Each has its advantages and disadvantages, but since flexbox is a newer technology, it has a higher degree of freedom.
Also, Internet Explorer, which is the leading browser that does not support CSS3, will end support in June 2022, and Chrome, Firefox, and Safari, which are major browsers, support CSS3, so don’t worry about it and select “flexbox”. It won’t be a big problem though.

summary

I introduced how to align the “li” elements of the list horizontally with CSS.

Either way, there is no problem in arranging the list horizontally, so use them according to your needs.