如何使用 CSS 将列表项垂直显示为列？

CSS 列：垂直显示列表项

为了应对将列表项垂直显示为列的挑战，我们转向 CSS3 列。此功能使我们能够轻松实现所需的布局。

考虑以下 HTML 代码：

<div>

现在，我们将添加 CSS 来设置其样式：

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

对于 CSS 列，会自动创建指定数量的列（在本例中为 3）。当浏览器调整大小时，它会动态调整列的宽度。这提供了列表项所需的垂直排列。

利用 CSS 列的强大功能来增强您的响应式布局并以列形式优雅地显示列表项！

以上是如何使用 CSS 将列表项垂直显示为列？的详细内容。更多信息请关注PHP中文网其他相关文章！