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:
Article Tags :