askvity

Which CSS property is used to make list items display horizontally?

Published in CSS Lists 3 mins read

The primary CSS property used to make list items display horizontally is display.

Understanding Horizontal Lists in CSS

By default, list items (<li>) are block-level elements. This means each list item typically starts on a new line, creating a vertical list structure. However, for navigation menus or other designs, you often need list items to appear side-by-side, forming a horizontal layout.

Using the display: inline-block Property

One of the most common and effective ways to achieve a horizontal list layout is by changing the display property of the list items (<li>).

Based on resources, to present a list horizontally instead of vertically in HTML and CSS, you can use the display: inline-block property on the list items.

Applying display: inline-block to list items gives them characteristics of both inline and block elements:

  • Inline Behavior: They will sit next to each other horizontally, wrapping to the next line if the container is not wide enough.
  • Block Behavior: You can set properties like width, height, margin, and padding which are typically ignored by purely inline elements like <span> or <a>.

This combination is perfect for creating navigable menu items that need specific dimensions and spacing.

How to Apply display: inline-block

You target the list items within your list (usually ul li or ol li) and set their display property. You'll also often want to remove the default list styling (bullets or numbers) using list-style: none; and remove default padding/margin from the ul or ol.

Example Code

Here's a simple example demonstrating how to use display: inline-block:

<ul class="horizontal-list">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>
.horizontal-list {
  list-style: none; /* Remove default list markers */
  padding: 0;       /* Remove default padding */
  margin: 0;        /* Remove default margin */
}

.horizontal-list li {
  display: inline-block; /* Make list items display horizontally */
  margin-right: 20px;    /* Add spacing between items */
}

.horizontal-list li a {
    text-decoration: none; /* Optional: style the links */
    color: #333;
}

In this example, the <li> elements are set to display: inline-block, causing them to line up horizontally. A margin-right is added to create space between the items.

Other Methods for Horizontal Lists

While display: inline-block is a common approach, especially noted in references for its straightforward application, other methods also exist depending on the layout requirements:

  • float: left;: Floating list items makes them sit side-by-side. You often need to clear the float afterwards.
  • display: flex;: Setting the list container (ul or ol) to display: flex; and using flexbox properties is a modern and powerful way to control the layout and alignment of list items.

However, display: inline-block remains a widely used and well-supported method for simple horizontal lists, particularly for navigation menus.

Benefits and Considerations

  • Simplicity: Relatively easy to understand and implement.
  • Control: Allows setting width, height, margin, and padding.
  • Spacing: Default spacing might appear between inline-block elements due to whitespace in the HTML. This can sometimes be managed by adjusting HTML structure or CSS.

In summary, applying display: inline-block to the <li> elements is a standard CSS technique to transform a vertical list into a horizontal one.

Key Property Summary

Property Value Applies To Effect
display inline-block List Items (<li>) Displays items horizontally with block properties

Related Articles