Dividing long list of <li> tags into columns?

Question

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?

Answer 1

I usually set the widths at 28% and float the to the left:

ul li {
   width: 28%;
   margin: .5em 2%;
   float:left;
}

The downside to this is that items fill like:

- - -
- - -
-

Not like:

- - -
- -
- -

If you want vertical filled columns, you need 3 <ul>s.

Answer 2

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.

Answer 3

there is a good article about multi column lists in Alistapart. Might be helpful.