CSS
How to Make a List Horizontal in CSS: A Step-by-Step Guide
By default, HTML lists (<ul> and <ol>) are displayed vertically, with each list item appearing on a new line. However, in many web design scenarios, such as navigation menus, breadcrumb trails, or inline lists, you may need to display list items horizontally.
In this blog, we’ll explore different ways to make a list horizontal using CSS, covering flexbox, inline-block, and float techniques.
1. Using display: flex (Recommended Method)
The easiest and most modern approach to making a list horizontal is by using CSS Flexbox.
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;
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-right: 20px;
}
li:last-child {
margin-right: 0; /* Removes margin from the last item */
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>
Explanation:
display: flex;makes the<ul>a flex container, aligning its children (<li>elements) in a row.list-style: none;removes default bullet points.margin-right: 20px;adds spacing between items.
✅ Best for: Navigation menus, inline lists, and responsive layouts.
2. Using display: inline-block (Legacy Method)
Another way to create a horizontal list is by making each <li> element an inline-block element.
Example:
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin-right: 15px;
}
li:last-child {
margin-right: 0;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Explanation:
display: inline-block;places<li>elements in a horizontal line while preserving block-level styling.margin-right: 15px;provides spacing between list items.
✅ Best for: Simple horizontal lists that don’t require complex responsiveness.
3. Using float: left (Older Method, Not Recommended)
Before flexbox, developers used CSS floats to align list items horizontally. However, this method requires clearfix techniques to prevent layout issues.
Example:
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
li {
float: left;
margin-right: 15px;
}
li:last-child {
margin-right: 0;
}
</style>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Projects</li>
<li>Contact</li>
</ul>
Explanation:
float: left;aligns<li>elements in a row.overflow: hidden;on the parent<ul>helps clear floats and prevent layout issues.
⚠️ Not recommended for modern web design since Flexbox and CSS Grid offer better solutions.
4. Making a List Horizontal with CSS Grid
For advanced layouts, CSS Grid can be used to align list items in a horizontal row.
Example:
<style>
ul {
display: grid;
grid-auto-flow: column;
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
</style>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Explanation:
display: grid;turns the<ul>into a grid container.grid-auto-flow: column;places items in a row.gap: 20px;adds spacing between items.
✅ Best for: Responsive layouts where items need precise alignment.
Which Method Should You Use?
| Method | Pros | Cons | Best For |
|---|---|---|---|
| Flexbox | Modern, responsive, easy to use | Requires browser support (modern browsers) | Navigation menus, inline lists |
| Inline-block | Works without flexbox/grid support | Extra spacing can occur due to whitespace | Simple horizontal lists |
| Float | Supported in old browsers | Requires clearfix, not flexible | Avoid using |
| CSS Grid | Great for complex layouts | More advanced, can be overkill for simple lists | Layouts needing precise alignment |
✅ Recommendation: Use Flexbox for most cases and CSS Grid for complex layouts.
Conclusion
Making a list horizontal in CSS is easy with the right approach. Flexbox is the most recommended method due to its simplicity and responsiveness, while CSS Grid is ideal for structured layouts. If working on an older project, inline-block may still be useful.
By implementing these techniques, you can style navigation menus, breadcrumb trails, and other inline lists efficiently in your web projects.