如何将单个 ul 中的列表分为 3 列

2022-01-19 00:00:00 frontend html css

我有一个 ul 里面的列表.是否可以将列表分为 3 列.

I have a ul has list inside it. Is it possible to divide the list into 3 columns.

我的html结构是这样的:

The structure of my html is like this:

 <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
 </ul>

问题:我无法直接编辑页面并将列表分成 3 ul.我必须通过 CSS 对其进行编辑.

Problem: I cannot directly edit the page and divide the list in to 3 ul. I must edit it via CSS.

输出:最终输出应该有 3 列.并通过 CSS 编辑

Output: The final output should have 3 columns. And edited via CSS

请帮帮我.

推荐答案

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

相关文章