如何布局组列表中的项目

比方说，我们有一个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

来源

2012-04-25 Zeljko

您可以使用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/

来源

2012-04-25 10:44:11 sandeep

这个演示在IE9下无法工作... [WhenCanIUse]（http://caniuse.com/#search=column-count）表示IE 10支持它... – Neysor 2012-04-25 10:58:52

对于IE你使用这个JS http：// www.csscripting.com/css-multi-column/ – sandeep 2012-04-25 10:59:55

目前这似乎是最好的解决方案。它看起来完全像我想要的，也是在更新版本的Opera中。唯一的问题是IE和Opera 10.对IE的建议js不是一个选项，因为它改变了html结构。 – Zeljko 2012-04-27 09:46:02

-1

使用HTML表格

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

，并更改表格的边框特性隐藏它。希望这有助于。

来源

2012-04-25 10:36:25 Tirtha

这不是表格数据，所以OP不应该使用表。 – Curt 2012-04-25 10:43:21

只需使用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。

参考文献：

来源

2012-04-25 10:41:23

您可以通过表取代 “UL” 试试吧，这符合你的需求。 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。所以我的回退版本应该可以在更多的浏览器中工作。这里使用jQuery（live demo）

来源

2012-04-25 10:52:19 Neysor

替代方式..

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

来源

2012-04-25 11:27:22

如何布局组列表中的项目

回答

相关问题