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

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

CSS:

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

演示:jsFiddle