Question

我在bootstrap中创建了一个大型菜单，我希望以最简洁的方法显示，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

我将源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以浮动uls而不是浮动lis（如小提琴中所示）。

ul li行但订购了

1 个答案: