Display UL elements in more columns

Question

Is it possible somehow achieve to display LI tags from one UL in multiple columns?

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

I now I can get it with nested ul tags, but if is it possible it would be great! Even when some li tags would be used to separate columns, but I don't know how to style it.

Answer 1

Add a wrapper around your UL and use the new CSS3 "columns":

<div class="columns">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

And then style with CSS:

.columns {
 -moz-column-count: 3;
 -moz-column-gap: 1em;
 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
}

Here's a jsFiddle: http://jsfiddle.net/NEHwE/