将 <li>
标签的长列表分成列,可以使用 CSS 的 column
属性。具体操作如下:
<ul>
标签添加一个类名,例如 column-list
。<ul class="column-list">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
...
</ul>
.column-list
类添加 column
属性,并设置 column-count
和 column-gap
的值。.column-list {
column-count: 3; /* 列数 */
column-gap: 20px; /* 列间距 */
}
这样,<li>
标签的长列表就会被分成三列,并且列间距为 20px。
需要注意的是,column
属性在不同的浏览器中可能有兼容性问题,因此建议使用浏览器前缀,例如 -webkit-column-count
和 -webkit-column-gap
。
领取专属 10元无门槛券
手把手带您无忧上云