How to inline a CSS list (5 ways)

We typically use a CSS list when we want to emphasise points in an article. They come in two flavours. An unordered list uses standard bullet points, whilst an ordered list uses sequential numbering. Out of the box, each list item appears under the last. However, sometimes we need the list to appear horizontally. A good example of this would be when we're building a navigation. Here are 5 ways we can inline a CSS list.

Before we begin, here's the unordered list HTML we'll be using.

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

Method 1 - Float

In modern website development, we rarely use the float property. Before flexbox or grid came along, we used floats to build whole grid systems. It also comes in handy when we're trying to wrap text around an image. The downside to this method is that it requires us to use the the clearfix hack.

css
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Clearfix */
ul:after {
  content: '';
  display: table;
  clear: both;
}
li {
  float: left;
  margin-right: 24px;
}
li:last-child {
  margin: 0;
}

Result

Method 2 - Inline Block

Using the display property, we're able to simply inline each list item. This is one of the cleanest ways to achieve an inline list.

css
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  margin-right: 24px;
}
li:last-child {
  margin: 0;
}

Result

Method 3 - Flexbox

The magic of flexbox has made our lives a lot easier when it comes to distributing elements. In this example, we've used the justify-content property so the list items span the full width of our parent div. We've then used the flex-wrap property so that the items automatically stack when the viewport size reduces. You'll also notice that we're no longer adding a right margin to each list item. Using the gap property, we can add gutters to each element. This means we don't need the :last-child selector.

css
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

Result

Method 4 - Grid

CSS grid has given us the ability to build powerful two-dimensional grid systems. With that in mind, using grid to inline a list is probably a little overkill. For the items to wrap automatically, we use the grid-template-columns property along with the auto-fit keyword and minmax() function. To learn more about how this works, check out this CSS Tricks article.

css
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

Result

Method 5 - Multi-column

Last on our list is an overlooked technique called multi-column. This method is useful when we're trying to create a newspaper inspired layout. Using the column-width property, we can define a width for each list item. When the viewport can no longer accommodate the specified width, the item wraps onto the next row.

css
ul {
  columns: 6;
  column-width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}

Result

Conclusion

Personally, I like to use the flexbox method. Flexbox offers a wide variety of layout options and we can easily control the layout depending on the viewport size.