CSS: How to Make a List Horizontal

By default, HTML lists (<ul> or <ol>) are displayed vertically, with each <li> item stacked on a new line. But what if you want the list items to display horizontally in a row? Whether you’re building a navigation menu or a feature list, making a list horizontal is simple with CSS.

In this blog, we’ll explore three practical methods to convert a vertical list into a horizontal one.

✅ Method 1: Use display: inline or inline-block

This is the most straightforward way to make list items sit side by side.

HTML

<ul class="horizontal-list">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

CSS

.horizontal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horizontal-list li {
  display: inline;
  margin-right: 20px;
}

🔹 display: inline makes each <li> behave like inline text, stacking horizontally.
🔹 list-style: none removes the default bullet points.

✅ Method 2: Use Flexbox (Recommended for Modern Layouts)

Flexbox provides a responsive and cleaner way to manage horizontal lists, especially when wrapping or alignment is needed.

CSS

.horizontal-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

💡 Flexbox is highly flexible (pun intended) and allows easy alignment, wrapping, spacing, and more.

✅ Method 3: Using float (Legacy Approach)

This method works but is outdated due to the rise of Flexbox and Grid.

.horizontal-list li {
  float: left;
  margin-right: 20px;
  list-style: none;
}

To avoid collapsing the parent container, you’d also need to clear the float afterward.

💡 Bonus: Styling a Horizontal Navigation Menu

.nav-menu {
  display: flex;
  list-style: none;
  background-color: #333;
  padding: 10px;
}

.nav-menu li {
  margin-right: 20px;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
}

🧪 Summary