How to make a list of horizontal CSS

CSS: Turn a list horizontal with a simple example.

Creating a List of Horizontal CSS

CSS is an incredibly powerful tool for styling webpages. With it you can control the size, color, position, and more of almost any element on your page. Today, we'll look at how to create a list of elements horizontally using CSS.

The first step is to set the display property of the list element to inline-block. This will make sure that all of the list items are displayed on one line:

ul {
    display: inline-block;
}

Next, we need to set the width of each list item so they'll fit on one line. We can do this easily by setting the width property:

li {
    width: 20%;
}

Lastly, we need to make sure that the list items don't wrap around to the next line. We can do this by setting the white-space property to nowrap:

ul {
    white-space: nowrap;
}

That's it! Your list should now be displayed horizontally. Keep in mind that you can tweak the width of the list items to make them fit perfectly on one line.