html - 如何设置列表样式以在 html 中显示为两个列

Question

我有一个清单如下：

<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>

它们在输出中显示为：

1
2
3
4
5
6
7
8
9

我怎样才能将它们设置为显示为：

1      2
3      4
5      6
7      8
9

我需要一个适用于 IE 的解决方案，我很乐意使用 JQuery。

Answer 1

一种方法是给每个列表项一个定义的宽度，然后给整个列表一个定义的宽度，等于两个列表项。然后将所有列表项浮动到左侧。

CSS：

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

演示：jsFiddle