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

How to divide list in a single ul into 3 columns(如何将单个 ul 中的列表分为 3 列)

问题描述

我有一个 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;
}

这篇关于如何将单个 ul 中的列表分为 3 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！