CSS 实现多行列表显示

在网页设计中，经常需要展示列表，而当列表项较多时，单行显示会导致页面过长，因此我们需要将列表项分为多行显示。这篇文章将会介绍如何使用 CSS 实现多行列表显示。

利用 display: inline-block 实现多行列表

我们可以利用 display 属性将列表项设置为 inline-block，这样它们就可以按照块级元素一样排列在一排。接着使用 max-width 属性限定每行最多可以容纳几个列表项，当超过限定数量后，下一个列表项就会自动换行到下一行。

示例代码如下：

ul {
  max-width: 500px; /*限定最大宽度*/
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #999;
}

你可以根据实际需求调整 max-width 和 margin-right、margin-bottom 属性的值。上面的代码片段生成的多行列表如下图所示：

使用 flexbox 实现多行列表

Flexbox 是 CSS3 中新增的一种布局方式，可以方便地实现多行显示的列表。我们可以使用 flexbox 的 flex-wrap 属性将列表项强制换行，每行的宽度根据实际需要自动调整，排版比较灵活。

示例代码如下：

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; /*当有多行时，让内容左对齐*/
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #999;
}

这里我们将 ul 的 display 属性设置为 flex，使其变为一个 flex container，将子元素 li 按照 flexbox 的方式排列。flex-wrap 属性指定当轴线空间不足时，子元素是换行还是压缩。justify-content 属性指定在每个轴线上如何对齐子元素。

上面的代码片段生成的多行列表如下图所示：

总结

本文介绍了两种方法实现多行列表显示。使用 display: inline-block 可以让列表项像块级元素一样排列，并限定每行的最大宽度，简单易懂。使用 flexbox 实现多行列表更灵活，能够自动调整每行的宽度，但也需要学习和掌握 flexbox 布局的相关知识。根据实际需求选择适合的方法，让页面的列表显示更加美观和易用。