如何使用 CSS 创建多列列表？

使用 CSS 在列中呈现列表

如果您有一个包含简短项目的冗长列表，想要以更紧凑的格式显示，考虑将其分成几列。 CSS 为此提供了一个简单的解决方案。

CSS 多列布局

CSS 多列布局模块允许您指定要在一个布局中创建的列数。元素。应用方法如下：

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

此代码将以四列呈现列表，各列之间有 20 像素的间隙。

浏览器支持

CSS 多列布局受除 Internet Explorer 9 或之外的所有现代浏览器支持

Internet Explorer 的替代品

如果您需要 Internet Explorer 支持，可以使用 JavaScript 解决方案，例如 Columnizer jQuery 插件。

Internet Explorer 回退到 Float

作为Fallback，您可以使用 CSS float 在 Internet Explorer 中实现类似的布局。但是，此方法将保留项目的顺序，但不会保留列结构。

li {
    width: 25%;
    float: left
}

注意：此回退可以与 Modernizr 或类似的条件加载技术一起使用，以仅针对 Internet Explorer .

以上是如何使用 CSS 创建多列列表？的详细内容。更多信息请关注PHP中文网其他相关文章！