0

我正在引导程序中创建一个大型菜单，我想以最干净最简单的方法显示 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 */
4

1 回答 1

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

于 2012-07-11T02:39:33.440 回答