html - 如何将单个ul中的列表分成3列

Question

我有一个 ul has 列表在里面。是否可以将列表分为 3 列。

我的html结构是这样的:

 <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 对其进行编辑。

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

请帮帮我。

Answer 1

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