如何在组中布局列表项

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

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

.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%;
}​

调整后的网页：

<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小提琴演示。

引用：

• column-count财产。
• CSS3 列兼容性。

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

您可以通过将

"ul"替换为适合您需求的表格来尝试。查看演示

您只需要使用 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列计数的可能性，但这并非在每个浏览器中都有效。请参阅何时可以。所以我是一个后备版本，应该可以在更多的浏览器中工作。

Answer 4

在这里使用 jQuery 的替代方法..（现场演示）

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>

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