How can I Display List Items as Columns using CSS?

Displaying List Items as Columns with CSS

Creating a responsive layout where list items flow vertically, adjusting to the available width, can be achieved using CSS columns. Follow these steps:

1. Define the CSS for the container element, specifying its height and the number of columns desired:

#limheight {
    height: 300px; /* Adjust to desired fixed height */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /* Placeholder value; can be adjusted */
}

2. Set the display property of the list items to inline-block to allow them to wrap within columns:

#limheight li {
    display: inline-block; /* Necessary for wrapping */
}

3. Include the HTML for the list, enclosed in a container element with the specified CSS class:

<div>

As the browser window is resized, the list items will automatically adjust their arrangement within the specified number of columns, maintaining the desired vertical flow.

The above is the detailed content of How can I Display List Items as Columns using CSS?. For more information, please follow other related articles on the PHP Chinese website!