1

次のような CSS を使用して、ページ全体 (ナビゲーション メニュー内) にインラインで表示される可変数の LI があります。

 ul.nav{
    margin: 0;
    padding: 0;
    text-align: center;
 }

 ul.nav li{
    margin: 0;
    padding: 5px 10px;
    list-style: none;
    display: inline-block;
 }

ページを狭くすると、ナビゲーション メニューは折り返されますが、各行の項目数を均等にしたいと考えています。

たとえば、9 個のアイテムが表示され、ページに 8 個しか収まらない場合、8 個を一番上の行に配置して次の行に移動するのではなく、5 個を一番上の行に配置し、4 個をその下に配置したいと考えています。問題は、このテンプレートではそれらを中央に配置する必要があることです。そのため、1 つの行がいっぱいで、2 番目の行が 1 つのアイテムであると、見栄えが悪くなります。

正確である必要はないので、いくつかを強制的に下げる (8 と 1 よりも 6 と 3 の方が良い) 何らかのマージン ソリューションが機能します。誰も私がこれを行う方法を知っていますか?

乾杯！

更新:明らかに、私は自分自身をうまく説明していませんでした。行のバランスをとろうとしていますが、特定の幅で特定の数を確保するのではありません。

例を見てみましょう... 4 倍のスペースがあるとしましょう (lis は 400px スペースで 100px に固定されているとします)

| -----  -----  -----  ----- |
||     ||     ||     ||     ||
| -----  -----  -----  ----- |

アイテムが 4 つと 1 つではなく 5 つある場合は、これが必要です

|    -----  -----  -----     |
|   |     ||     ||     |    |
|    -----  -----  -----     |
|        -----  -----        |
|       |     ||     |       |
|        -----  -----        |

6 項目の場合、3 と 3 は 7 項目の場合、4 と 3 は 8 項目の場合、4 と 4 は 9 項目の場合、3 3 と 3

今、私はPHPでプログラム的にこれを行う必要があることを始めていますが、それはウィンドウのサイズを変更する人々には対応していません

4

3 に答える 3

0

あなたのdivサイズが修正されている場合は、修正幅に特定のliを指定してください。たとえば、500px のような div があるとします。上部に 4 つのアイテム、下部に 1 つのアイテムが必要です。したがって、li の幅は約 110px になります。

だからあなたのli幅を修正してみてください。

于 2013-01-25T04:20:01.130 に答える
0

最初の 5 つを別のdiv持ちの中にラップしdisplay:inline-block、残りを別の持ちのdiv中にラップdisplay:inline-blockして、幅が小さい場合は 2 つに分割する必要があります。

または、メディア クエリを記述して、異なる画面サイズで異なる動作をさせることもできます

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.w3.org/TR/css3-mediaqueries/

http://mediaqueri.es/

于 2013-01-25T04:23:38.943 に答える
0

パワンは正しい軌道に乗っています。最上位行に特定の数の LI を最小限に抑えたい場合は、UL に最小幅を設定することも役立ちます。オーバーフローをデフォルトのままにしておくと、div の幅をオーバーライドできます。

ul li { 
list-style-type: none;
display: inline;
float: left;
width: 100px;

}

ul { 最小幅: 300px; }

ボディ { 幅: 200px; }

フィドルを見る

于 2013-01-25T05:02:27.977 に答える