生成列表2列

Question

请看一下http://www.animefushigi.com/的页脚，我正在尝试使代销商列表2列，因为1太长了。

代码如下

    <ul class="none"><li><span>Affiliates<em>&nbsp;</em></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc

Answer 1

也许你可以像这样创建嵌套的ul：

<ul class="none">
<li><span>Affiliates<em>&nbsp;</em></span></li>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
 </ul>
 <ul>
  <li>link 3</li>
  <li>link 4</li>
 </ul>
</ul>

Answer 2

你可以只使用css：http://jsfiddle.net/seler/ThvUJ/ (在IELTE8中不起作用)尝试这样的东西

但我认为最好的方法是编写js脚本，它将计算li元素的数量，并在必要时添加</ul><ul>。(示例：http://jsfiddle.net/seler/ThvUJ/3/)

Answer 3

如果顺序不重要(我假设它不重要，因为您使用的是无序列表)，则可以使用当前的HTML实现此效果。只需以这样的方式浮动列表元素，即每行只能容纳两个元素。下面是我的意思的一个快速示例：

ul { 
    width: 200px;
    list-style: none;
}
li {
    float: left;
    width: 90px; /* 100 - 5 - 5 */
    margin: 3px 0;
    padding: 0 5px;
}
li a {
    width: 90px;
    display: block;
}