How to Horizontally Display `` List Items Using CSS?

How to Make a <ul> Display in a Horizontal Row

In HTML, list items are typically displayed as block elements, which means they appear one on top of the other. However, you can use CSS to change the display property of list items to inline, which will cause them to display side-by-side on the same line.

To change the display property of list items, you can use the following CSS rule:

li {
    display: inline;
}

You can also use a context selector to apply the inline display property to list items within a specific <ul> element, like this:

#ul-id li {
    display: inline;
}

Here is an example of how to use the inline display property to make a <ul> display in a horizontal row:

<ul>

#ul-id {
    display: inline;
}

#ul-id li {
    display: inline;
}

This code will result in the following output:

Item 1 Item 2 Item 3

As you can see, the list items are now displayed in a horizontal row.

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