如何使用 CSS3 将列表项显示为列？

使用 CSS3 列将列表项显示为列

您可以根据屏幕尺寸以行或列形式显示列表吗？这是响应式网页设计中的常见挑战。虽然表格是一种选择，但 CSS3 以其 columns 属性提供了更优雅的解决方案。

以下是 HTML 结构示例：

<div>
<p>要将这些列表项显示为列，请添加以下 CSS :</p>
<pre class="brush:php;toolbar:false">#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

结果将是三列列表项，如图所示：

1   4   7
2   5   8
3   6   9

调整column-count值以更改列数。为了提高响应速度，您可以使用媒体查询根据屏幕尺寸在单列和多列布局之间切换。