How Can I Create Multi-Column Lists with CSS?

Presenting Lists in Columns Using CSS

If you have a lengthy list with short items that you want to display in a more compact format, consider splitting it into columns. CSS provides a straightforward solution for this.

CSS Multi-Column Layout

The CSS Multi-Column Layout module allows you to specify the number of columns to create within an element. Here's how to apply it:

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

This code will render the list in four columns with a 20px gap between them.

Browser Support

CSS Multi-Column Layout is supported by all modern browsers except Internet Explorer 9 or older.

Alternatives for Internet Explorer

If you require Internet Explorer support, you can use a JavaScript solution such as the Columnizer jQuery plugin.

Fallback to Float for Internet Explorer

As a fallback, you can use CSS float to achieve a similar layout in Internet Explorer. However, this method will preserve the order of items but not the column structure.

li {
    width: 25%;
    float: left
}

Note: This fallback can be used with Modernizr or similar conditional loading techniques to target only Internet Explorer.

The above is the detailed content of How Can I Create Multi-Column Lists with CSS?. For more information, please follow other related articles on the PHP Chinese website!