如何在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。

- mans

---

可能是如何使用CSS创建一个两列项目列表？的重复问题。 - Sebastian Paaske Tørholm

请尝试访问此链接：http://www.alistapart.com/articles/multicolumnlists - Prashobh

Answer 1

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

CSS：

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

Demo: jsFiddle

- Billy Moon