How can I display list items vertically as columns using CSS?

CSS Columns: Displaying List Items Vertically

In response to the challenge of displaying list items vertically as columns, we turn to CSS3 columns. This feature allows us to effortlessly achieve the desired layout.

Consider the following HTML code:

<div>

Now, we'll add CSS to style it:

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

With CSS columns, the specified number of columns (in this case, 3) is created automatically. It dynamically adjusts the width of the columns as the browser resizes. This provides the desired vertical line-up of list items.

Enjoy the power of CSS columns to enhance your responsive layouts and elegantly display list items as columns!

The above is the detailed content of How can I display list items vertically as columns using CSS?. For more information, please follow other related articles on the PHP Chinese website!