如何佈局組列表中的項目

比方說，我們有一個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

如何佈局組列表中的項目

回答

相關問題