How to create a Horizontal List in HTML ?

Last Updated : 31 Jan, 2024

Creating a horizontal list in HTML is a common requirement for navigation menus or any situation where items need to be displayed side by side rather than vertically.

To create a horizontal list, you can use an unordered list (<ul>) or ordered list (<ol>) along with list items (<li>) and apply CSS to style the list horizontally. The below steps will be followed:

First, use the display: flex on that <ul> then it turns the list into a flex container.
After giving styling like list-style-type: none and adjusting margins remove default list styling.
Applying flex-direction: row by default aligns items horizontally.
Margins or paddings between list items can be adjusted for spacing.

Example: Implementation for creating a horizontal list.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
      
    /* Style to create a horizontal list */ 
    ul.horizontal-list { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      display: flex; 
    } 
  
    ul.horizontal-list li { 
      margin-right: 10px; 
    } 
  </style> 
</head> 
  
<body> 
  <ul class="horizontal-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
  </ul> 
</body> 
  
</html>