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

你可以只使用css尝试这样的事情：http://jsfiddle.net/seler/ThvUJ/（不会在ie 8中工作）

但我认为最好的方法是制作js脚本，这将计算li元素并在必要时添加</ul><ul>。（例如：http://jsfiddle.net/seler/ThvUJ/3/）

Answer 2

如果订单无关紧要（我假设它不是因为您使用的是无序列表），您可以使用当前的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;
}

Answer 3

也许你可以像这样制作嵌套的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 4

如果您希望您的页脚达到特定高度，可以执行以下操作：http://jsfiddle.net/NfMPX/

基本上，设置ul的高度并浮动并设置li的宽度，它们将自动换行。

制作清单2列

4 个答案: