Question

假设我们有一个像这样的HTML列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

如何使用css和/或java脚本让浏览器像这样显示它（以四个为一组，在组之间有一些余地）：

1 2    5 6    9 10
3 4    7 8

Answer 1

在将column-count包装到可以应用float规则的父元素中之后，只需使用width，ul和column-count：

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
li {
    float: left;
    width: 50%;
}

调整后的HTML：

<div class="colWrap">
    <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>
        <li>10</li>
    </ul>
</div>

JS Fiddle demo

参考文献：

Answer 2

您可以使用css3 column-count属性：

像这样写：

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

选中此http://jsfiddle.net/rJTGJ/2/

Answer 3

你可以通过替换＆＃34; ul＆＃34;来尝试它。与表，适合您的需求。的 SEE DEMO

您只需要使用css或不同的html标签自定义此演示。

<强>的JavaScript

$(function(){ $("ul").each(function(){ var oh = "<table><tr>"; for(i=0;i<this.children.length;i++){ oh += "<td>"+this.children[i].innerHTML+"</td>"; if(i%2==1){ oh+="</tr>"; if(i%4==3){ oh+="</table><table><tr>"; } else { oh+="<tr>"; } } } oh += "</tr></table>"; this.outerHTML = oh; }); });

修改

CSS column-count也有可能，但这并不适用于所有浏览器。见WhenCanIuse。所以我的是一个后备版本，应该可以在更多的浏览器中使用。

Answer 4

在这里使用jQuery的替代方式..（live demo）

var ul = $('ul'),
    lis = $('ul li');

lis.each(function (index) {
  if(index % 4 === 0) {
    ul.append($('<ul />'));
  }
  ul.find('ul').eq(~~(index / 4)).append($(this));
});

和CSS

ul ul {
  float: left;
  width: 50px;
  margin-right: 30px;
}
ul li {
  list-style-type: none;
  float: left;
  width: 50%;
}

Answer 5

使用html表

<table>
 <tr>
  <td></td>
 </tr>
</table>

并更改表格的边框特征以隐藏它。希望这有帮助。

如何在组中布置列表项

5 个答案: