Creating Horizontal HTML Lists with CSS
While HTML lists are designed to display items vertically by default, some scenarios may necessitate displaying them horizontally.
That is when a horizontal arrangement is more aesthetically pleasing or aligns better with the overall design of the webpage. Such include the design of navigation menus, image galleries, social media icons, etc. This is a straightforward task using CSS.
In this article, you will learn how to display HTML lists in a horizontal layout using CSS, with the help of multiple examples.
How to Make a List Horizontal in CSS
HTML provides two types of lists; <ul> (unordered list) and <ol> (ordered list). Both of them use the <li> tags to specify list items.
The primary CSS property used to change the layout of list items is display. By default, <li> elements have a display: list-item; property, causing them to stack vertically.
Example HTML List
<ul>
<li>Orange</li>
<li>Avocado</li>
<li>Banana</li>
<li>Mango</li>
<li>Apple</li>
</ul>
You can use the methods below to align the list items side by side horizontally:
1. Using the Inline Display Property
Applying the display: inline; property alters the default behavior and makes the items appear side by side.
li {
display: inline;
}
2. Using the Inline-Block Display Property
The display: inline-block property is much similar to display: inline, only that the top and bottom margins/paddings are respected. With display: inline, they are not.
The display: inline-block also allows you to set a width and height on the element.
li {
display: inline-block;
}
3. Using the Float Property
The float property specifies whether an element should float to the left, right, or not at all.
Employ float: left on list items for a horizontal flow.
li {
float: left;
}
Unlike the previous two methods, the float method retains the bullet points or numbers and does not include spacing between the items.
If you want to do away with bullets/numbers, use the list-style: none; property. You can also use the padding property to add space around the list items.
li {
float: left;
list-style: none;
padding: 5px;
}
It's however important to note that absolutely positioned elements ignore the float property!
5. Using Flexbox Display
Flexbox is a CSS layout model that enables the creation of horizontal lists. By applying display: flex; to the parent <ul> or <ol> element, you can leverage the full potential of Flexbox.
ul {
display: flex;
}
Similar to the float method, flex also retains the bullets/numbering on the list items and does not add space between the items. You can add styling for <li> element with those specifications.
ul {
display: flex;
}
li {
list-style: none;
padding: 5px;
}
To evenly distribute the items horizontally within the available width, you can use the add justify-content: space-between; to the parent.
ul {
display: flex;
justify-content: space-between;
}
li {
list-style: none;
}
6. Using Grid Display Property
For more complex layouts, CSS Grid offers a grid-based layout system that enables precise control over the placement of elements. By setting up a grid container, you can define rows and columns to arrange list items as needed.
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
In this example, we have created a grid layout with columns that adapt to the available space.
Handling Responsive Design
It's important to consider the responsiveness of your horizontal lists for mobile-first design. You can use media queries to adjust the layout based on the screen size. For example:
@media (max-width: 768px) {
ul {
flex-direction: column;
}
}
This media query switches the list back to a vertical arrangement when the screen width is 768 pixels or less, ensuring a seamless experience across various devices.
Conclusion
Transforming HTML lists from the default vertical layout to a horizontal one involves leveraging the display and float properties along with advanced layout models like Flexbox and Grid.
Experiment with these concepts, and tailor your approach based on the specific requirements of your web design projects.
