如何使用 CSS 将长列表分成多列？

使用 CSS 将列表分成列

在多列中呈现又长又窄的列表可以增强网页的可读性并减少过度滚动的需要。本文探讨了完成此任务的 CSS 技术。

CSS 多列解决方案

对于支持 CSS 多列规范的现代浏览器，您可以使用以下内容属性：

ul {
    column-count: 4;
    column-gap: 20px;
}

这会自动将列表分为四列，各列之间的间隙为 20px

IE 的 JavaScript 后备

IE 9 及更早版本不支持多列布局，因此需要 JavaScript 后备：

1. 使用像 Columnizer 这样的 jQuery 插件(http://welcome.totheinter.net/columnizer-jquery-plugin/)。
2. 实现手动回退解决方案，使用 float: left 并计算每个列表项的正确宽度（如 http: //jsfiddle.net/NJ4Hw/)。

其他注意

• -moz- 和 -webkit- 前缀用于与旧版本的 Firefox 和 Safari 兼容。
• 后备解决方案可能无法保留正确的顺序在 IE 中列出项目。
• 考虑使用跨浏览器测试工具来确保不同浏览器之间的兼容性浏览器。

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