1

だから私のフッターでは、各列が好きな列としてメニューリンクの束を表示します

Header Column
 Column Link
 Column Link
 ...

これなら一列に5個入ります。私が望むのは、コンテンツ ユーザーが次の行に折り返され、最初の列ヘッダーの下にある 6 番目の列を追加する場合です。

現在、次の行に折り返されていますが、1 行目の高さに応じて次の行にランダムに配置されているようです。

マークアップは次のようになります

 <ul id="mainMenuList">
  <li class="footerParentSubLists boldMenu"></li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  <li class="footerParentSubLists boldMenu">..subitems</li>
  ...
<ul>

列ごとに右に幅を設定しています。これにより、行ごとに5つが十分に残ります

.boldMenu {
    max-width: 170px;
    width: 170px;
}

左にも浮いてます

何か案は ？

4

1 に答える 1

0

これ（CSS3、IE8と互換性がありません）を試して、（5n + 1）番目のリスト要素を新しい行に移動させます：

#mainMenuList > li:nth-child(5n+1) {
    clear: left;
}

http://jsfiddle.net/mblase75/J4gQP/

下位互換性が問題になる場合は、(5n+1) 番目の要素ごとにクラスを直接追加するか、JavaScript を記述してそれを実行し、clear:leftそのクラスも同様に行うことができます。

于 2012-12-19T18:57:41.107 に答える