Is it possible to split an HTML list into columns based on its positions using CSS and/or jQuery?
For example, if I want to create a number of columns equal to (TOTAL-ITEMS/3).
In this example, we will end up with 2 columns.
<ul id="list-1" >
<li>item in first column</li>
<li>item in first column</li>
<li>item in first column</li>
<li>item in second column</li>
<li>item in second column</li>
<li>item in second column</li>
</ul>
This time, we'll have 3 columns.
<ul id="list-1">
<li>item in first column</li>
<li>item in first column</li>
<li>item in first column</li>
<li>item in second column</li>
<li>item in second column</li>
<li>item in second column</li>
<li>item in third column</li>
<li>item in third column</li>
<li>item in third column</li>
</ul>
Unfortunately, as the list is generated by a CMS, there is no option to add custom classes or IDs.