ul li行但已下令

Question

我正在引導程序中創建一個大型菜單，我想以最簡單的方法顯示4行（或更多行），但4行是好的菜單項。

我在這里http://jsfiddle.net/ozzy/cX5DU/

看來問題在於，li是以通過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 */

Answer 1

我將使用單個ul保留源html，該ul依次列出各項，然后在加載DOM時通過JS進行一些改組：

$(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以浮動ul，而不是浮動lis（如小提琴所示）。