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

用CSS将网页列表分成列

问题：

增强可读性网页上的垂直列表，将其拆分为多个columns。

解决方案：

推荐的CSS解决方案利用column-count属性。此属性可以将列表划分为具有可调整间距的指定列。

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

此代码将在列表中创建四列，它们之间有 20 像素的间隙。

兼容性：

浏览器对列计数的支持很普遍，不包括 Internet Explorer 版本 9 和

替代方案：

对于 Internet Explorer 支持，可以采用基于 JavaScript 的解决方案，例如 Columnizer for jQuery。

后备Internet Explorer：

利用CSS后备，例如浮动：向左，在 Internet Explorer 的列中水平显示列表项。

<!--[if lt IE 10]>
<style>
li {
  width: 25%;
  float: left
}
</style>
<![endif]-->

注意：

CSS 回退将保持类似的视觉布局，但可能会破坏列表项的顺序。

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