How to create horizontal list in html

HtmlHow-ToBeginner · 3 min read

How to Create a Horizontal List in HTML Easily

To create a horizontal list in HTML, use a <ul> or <ol> element and apply CSS styles like display: flex; or display: inline-block; to the list items. This arranges the list items side by side instead of vertically.

📐

Syntax

Use a standard list element like <ul> or <ol> for the list. Then style the list items <li> with CSS to display horizontally.

<ul>: Unordered list container.
<li>: Each list item.
CSS display property: Controls layout style.

css

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

/* CSS */
ul {
  display: flex; /* or inline-block on li */
  padding: 0;
  list-style: none;
}

li {
  margin-right: 1rem;
}

💻

Example

This example shows a horizontal list using display: flex; on the <ul>. The list items appear side by side with spacing.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal List Example</title>
<style>
ul {
  display: flex;
  padding: 0;
  list-style: none;
  background-color: #f0f0f0;
  border-radius: 0.5rem;
  max-width: 400px;
  margin: 2rem auto;
}
li {
  margin-right: 1.5rem;
  padding: 0.5rem 1rem;
  background-color: #4a90e2;
  color: white;
  border-radius: 0.3rem;
  font-family: Arial, sans-serif;
}
li:last-child {
  margin-right: 0;
}
</style>
</head>
<body>
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
</body>
</html>

Output

A horizontal list with three blue boxes labeled Home, About, Contact arranged side by side on a light gray background centered on the page.

⚠️

Common Pitfalls

Common mistakes include:

Not removing default list styles like padding and bullets, which can cause unwanted spacing.
Using display: inline; on <li> without adjusting margins, which can make spacing inconsistent.
Forgetting to handle the last item margin, causing extra space at the end.

Always reset padding and list-style on the <ul> and use margin-right carefully on <li>.

css

<!-- Wrong way: default list with bullets and vertical -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

/* Right way: horizontal with flex and no bullets */
ul {
  display: flex;
  padding: 0;
  list-style: none;
}
li {
  margin-right: 1rem;
}
li:last-child {
  margin-right: 0;
}

📊

Quick Reference

Tips for horizontal lists:

Use display: flex; on the list container for easy horizontal layout.
Remove default padding and bullets with padding: 0; and list-style: none;.
Add spacing between items with margin-right on <li>.
Remove margin on the last item to avoid extra space.
Use semantic HTML for accessibility and SEO.

✅

Key Takeaways

Use CSS display: flex; on <ul> to arrange list items horizontally.

Remove default list padding and bullets with padding: 0; and list-style: none;.

Add right margin to <li> for spacing, but remove it on the last item.

Avoid using display: inline; alone as it can cause inconsistent spacing.

Always use semantic list tags for better accessibility and SEO.