How to Make Unordered List Items Display Horizontally Using CSS?

How to Make an Unordered List Display Horizontally in a Row

You can use CSS to format HTML elements in various ways. One common styling task is to arrange list items horizontally instead of vertically. This article explains how to achieve this effect using the display property.

Problem

How can I make list items appear horizontally in a row using CSS?

Solution

List items are typically block elements, which means they display on their own line. To make them flow horizontally, you need to change them to inline elements. This is done using the display property:

#ul_top_hypers li {
  display: inline;
}

In your initial code, you had applied the display: inline property to the ul element itself. However, this only affects the overall list, not the individual list items. To make the list items display horizontally, you need to use a context selector to apply the display: inline property to them specifically.

Working Example

Here is an updated snippet that demonstrates how to display list items horizontally in a row:

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

The above is the detailed content of How to Make Unordered List Items Display Horizontally Using CSS?. For more information, please follow other related articles on the PHP Chinese website!