How to create a Horizontal List in HTML ?
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 > |
Output:
Contact Us