CSS
How to Make a List Horizontal in CSS (Step-by-Step Guide)
By default, HTML lists (<ul> and <ol>) are vertical, meaning each list item (<li>) appears on a new line. However, if you want to display a list horizontally (e.g., for navigation menus, breadcrumbs, or inline elements), you can use CSS styling to achieve this.
In this blog, we’ll cover:
✅ How to make a list horizontal using display: inline-block
✅ How to make a list horizontal using Flexbox
✅ How to make a list horizontal using CSS Grid
✅ How to add spacing and style the list
1. Make a List Horizontal Using display: inline-block;
The inline-block method allows list items (<li>) to appear side by side instead of stacking vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal List</title>
<style>
ul {
padding: 0;
list-style: none;
}
li {
display: inline-block; /* Makes list items appear in one row */
margin-right: 15px; /* Adds spacing between items */
background-color: lightgray;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>
✅ Why it works?
display: inline-block;makes each<li>appear inline while still allowing padding and margins.margin-right: 15px;adds spacing between the list items.list-style: none;removes the default bullet points.
2. Make a List Horizontal Using Flexbox
Flexbox is the most modern and responsive way to create a horizontal list.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal List with Flexbox</title>
<style>
ul {
display: flex; /* Makes list horizontal */
list-style: none;
padding: 0;
background-color: #333;
}
li {
padding: 10px 15px;
color: white;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</body>
</html>
✅ Why it works?
display: flex;aligns the<li>items in a row.- No need for
inline-blockorfloat, making it a cleaner solution.
3. Make a List Horizontal Using CSS Grid
CSS Grid provides another efficient way to align list items horizontally.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal List with CSS Grid</title>
<style>
ul {
display: grid;
grid-auto-flow: column; /* Makes the list horizontal */
gap: 15px; /* Adds spacing between items */
list-style: none;
padding: 0;
}
li {
background-color: #008CBA;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Horizontal List with Grid</h2>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</body>
</html>
✅ Why it works?
display: grid;makes layout control simple.grid-auto-flow: column;ensures list items are arranged in a single row.
4. Make a List Horizontal Using float (Old Method – Not Recommended)
Before Flexbox and Grid, the float property was used to make lists horizontal.
Example:
ul {
list-style: none;
padding: 0;
}
li {
float: left;
margin-right: 15px;
}
❌ Why is this outdated?
- Requires clearing floats (
clearfix). - Less flexible for responsive design.
- Use Flexbox or Grid instead.
5. Add Spacing and Styling to the List
Once your list is horizontal, you might want to style it further.
Adding Spacing:
ul {
gap: 20px; /* Works in Flexbox and Grid */
}
li {
margin-right: 20px; /* Works in inline-block */
}
Styling for Navigation Menus:
ul {
background: #333;
padding: 10px;
}
li {
color: white;
padding: 10px 15px;
cursor: pointer;
}
li:hover {
background: #555;
}
Which Method Should You Use?
| Method | Best For |
|---|---|
inline-block | Simple lists with no complex styling. |
| Flexbox | Navigation menus, responsive layouts. |
| CSS Grid | Even spacing and structured layouts. |
✅ Best Choice?
Use Flexbox (display: flex;) for most modern designs.
Conclusion
To make a list horizontal in CSS:
- Use
display: inline-block;for a quick fix. - Use
display: flex;for modern, responsive layouts. - Use
display: grid;for structured spacing.
By applying these techniques, you can create beautiful horizontal lists for menus, buttons, and more.