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><p>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.</p></div>

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!