ul li rows but ordered

我在bootstrap中創建了一個超級菜單，我想在最簡潔的方法中顯示4行（或更多），但4是很好的菜單項。ul li rows but ordered

小提琴似乎是，李的跨頁的順序呈現問題通過HTML ..

有排序的列的方式讀取，從而使li的垂直數字順序顯示？

標籤爲jquery，因爲我認爲jquery可能是這裏的救星。

CSS是：

ul{ width:760px; margin-bottom:20px; overflow:hidden; border-top:1px solid #ccc; } 
li{ line-height:1.5em; border-bottom:1px solid #ccc; float:left; display:inline; } 
    #double li { width:50%;} /* 2 col */ 
    #triple li { width:33.333%; } /* 3 col */ 
    #quad li { width:25%; } /* 4 col */ 
    #six li  { width:16.666%; } /* 6 col */

來源

2012-07-11 422

創建4個'ul'並且把它們一個接一個地 – zerkms 2012-07-11 02:04:18

是啊已經試過了......不知道是否有更好的方法，因爲它會最終動態傳播 – 422 2012-07-11 02:14:55

_「4 rows」_ - 你的意思是4列？（就像在你的小提琴中一樣）關於zerkms的建議，你可以在你的源html中包含一個'ul'，就像在小提琴中一樣，然後用JS（帶或不帶jQuery）動態地創建額外的'ul'元素。 – nnnnnn 2012-07-11 02:17:08

我會保持HTML源與單個UL列出爲了項目，然後通過做一些JS的洗牌DOM加載時：

$(document).ready(function(){  
    var $ul = $("#quad"), 
     $lis = $ul.children(), 
     i, 
     cols = 4, 
     rowHeight = Math.ceil($lis.length/cols); 

    for (i=0; i+rowHeight<$lis.length; i+=rowHeight) 
     $("<ul></ul>").append($lis.slice(i,i+rowHeight)) 
         .insertBefore($ul); 
});

演示：http://jsfiddle.net/cX5DU/1/

這創建添加UL元素，每個元素都有自己的原始列表部分。您需要更新CSS以浮動uls而不是浮動lis（如小提琴中所示）。

來源

2012-07-11 02:39:33 nnnnnn

Aww甜心謝謝，就是我之後 – 422 2012-07-11 03:06:49

ul li rows but ordered

回答

相關問題