Redshot Redshot - 1 month ago 8
CSS Question

How to divide list in a single ul into 3 columns

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

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>


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

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

Please help me.

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