How can I print an html list in two columns just using markup and CSS?

I have a list, ul or ol, with n list items (lis), how can开发者_JS百科 I convert this list into a two independent column list items by just using CSS & html?

---

You can do that by floating the lis, and forcing them to have a width of 50%:

ul {
    overflow: hidden;
}
ul li {
    width: 50%;
    float: left;
}

Try it here: http://jsfiddle.net/KzCxh/

---

At this point, not in the way you probably want to, at least not reliably cross-browser. It is easy to make it two columns where the list would look like:

record 1    record 2
record 3    record 4

To do that you would just float each li left.

Someday you'll be able to do it across browsers - it is coming in CSS3.

---

If you know exact widths something like this will work quite well:

ul{
    width: 300px;
    overflow: hidden;
}

ul li{
    float: left;
    width: 150px;  
}

JSFiddle