askvity

How do I change a vertical list to horizontal in CSS?

Published in CSS List Styling 4 mins read

To change a vertical list to horizontal in CSS, the most common and effective method is to use the display: inline-block property on the list items (<li>).

Making Lists Horizontal

By default, HTML lists (<ul> or <ol>) display list items (<li>) vertically because list items are block-level elements. To arrange them horizontally, you need to change their display behavior.

According to the reference, to present a list horizontally instead of vertically in HTML and CSS, you can use the display: inline-block property on the list items. This is the standard and widely recommended approach.

Using display: inline-block

Applying display: inline-block to <li> elements makes them behave like inline elements (sitting next to each other) but retain block properties (like setting width, height, margin, and padding).

Here's how you typically apply this CSS:

HTML Structure:

<ul class="horizontal-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS Styling:

.horizontal-list {
  list-style: none; /* Removes default bullets/numbers */
  padding: 0;       /* Removes default padding */
  margin: 0;        /* Removes default margin */
}

.horizontal-list li {
  display: inline-block; /* Key property for horizontal layout */
  margin-right: 20px;    /* Adds spacing between list items */
}

/* Style for the last item to avoid extra space */
.horizontal-list li:last-child {
  margin-right: 0;
}

In this CSS:

  • list-style: none; removes the default bullet points or numbers.
  • padding: 0; and margin: 0; on the <ul> remove default browser spacing which can affect layout.
  • display: inline-block; on the <li> is what makes the items line up horizontally.
  • margin-right: 20px; will display the bulleted list items horizontally with some spacing in between them. You can adjust this value to change the spacing as needed.
  • margin-right: 0; on the :last-child selector removes the extra space after the final list item.

Adjusting Spacing

The spacing between horizontally displayed list items using display: inline-block is controlled primarily by the margin-right (or margin-left) property on the <li> elements.

CSS Spacing Example:

.horizontal-list li {
  display: inline-block;
  padding: 10px 15px; /* Adds internal padding */
  margin-right: 15px;  /* Adds external space to the right */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

Using padding adds space inside the element, around its content, while margin adds space outside the element, pushing other elements away. Both can contribute to the perceived spacing.

Alternative Method: display: inline

Another way is to use display: inline. This also places elements next to each other. However, unlike inline-block, you cannot set width, height, or vertical margin (margin-top, margin-bottom) on elements with display: inline. While simpler for very basic lists, inline-block offers more control over dimensions and spacing.

CSS using display: inline:

.horizontal-list li {
  display: inline; /* Makes items sit next to each other */
  /* Cannot set width/height or vertical margin here */
  margin-right: 15px; /* Horizontal margin works */
}

Summary of Properties

Here's a quick look at the key CSS properties used:

CSS Property Applied To Purpose
list-style: none; ul or ol Removes default list markers (bullets/numbers)
padding: 0; ul or ol Removes default inner space
margin: 0; ul or ol Removes default outer space
display: inline-block; li Makes list items sit horizontally
margin-right: ...; li Adds horizontal space between items

By applying display: inline-block to your list items and adjusting the margin property, you can easily transform a vertical list into a horizontal one, suitable for navigation menus or other horizontal layouts.

Related Articles