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/

Answer 2

It is possible to have them floating left, and clearing them every n items. This would simulate a fixed amount of columns, and work in IE9+ and all the other browsers

li{
    float: left;
}

li:nth-child(4n+1){ /*replace 4 with the number of columns*/
    clear: left;
}

JSFiddle

Answer 3

The old fashion way.

the css style:

.ul li { float: left; margin-right: 20px; }

and the implementation:

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