Menu
I've got a list of about 30 <li> in a <ul>. Is there any way, using CSS, to divide these into three columns of ten?
982
This is the simplest way to do it. CSS only. add width to the ul element. add display:inline-block and width of the new column (should be less than half of the ul width).
In CSS3 this is possible.
#columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
HTML:
<div id="columns">
<ul>
... lots of lis ...
</ul>
</div>
The list items will spill over into the next column as they exceed the height of the container.
Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
