How to style a list to show up as two col in html

Question

I have a list as follow:

<ul>
   <li>1<li>
   <li>2<li>
   <li>3<li>
   <li>4<li>
   <li>5<li>
   <li>6<li>
   <li>7<li>
   <li>8<li>
   <li>9<li>
 </ul>

they appear on output as :

1
2
3
4
5
6
7
8
9

how can I style them to show up as:

1      2
3      4
5      6
7      8
9

I need a solution which works on IE and I am happy to use JQuery.

Answer 1

One way to do it would be to give each list item a defined width, and then give the whole list a defined width equal to two list items. Then float all list items to the left.

CSS:

li{
    padding: 0; margin: 0;
    width: 4em;
    float: left;
}
ul{
    padding:0; margin: 0;
    width: 8em;
}​

Demo: jsFiddle