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

回答

相关问题