0

ブートストラップでメガ メニューを作成しています。最も簡単な方法で 4 行 (またはそれ以上) で表示したかったのですが、4 行が適切なメニュー項目です。

ここでフィドルを作成しましたhttp://jsfiddle.net/ozzy/cX5DU/

問題は、HTML を介して読み取られた順序でページ全体に li がレンダリングされることです。

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 を保持し、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 要素が作成されます。lis をフローティングするのではなく、uls をフロートするように CSS を更新する必要があります (フィドルに示されているように)。

于 2012-07-11T02:39:33.440 に答える