1

注：これは重複ではありません。私はいくつかの質問をチェックしました、そして私のものは詳細が異なります。

私は現在、Webページに次のような水平ナビゲーションメニューを持っています。 水平メニュー

メニューはul要素です。問題は、現在、li間の間隔を取得するためにmargin-rightを明示的に指定する必要があることです。可能な限り間隔を60pxにしたいのですが、ブラウザが縮小されるたびに縮小し、メニューの間隔をそれほど大きくすることができなくなります。

どうすればこれを達成できますか？

4

1 に答える 1

2

あなたは超聖なるUber-Grailを探していると思います。私は間違っているかもしれませんが、CSSだけでは不可能だと思います。それはあなたがmax-widthを持っているようなmax-marginのようなものがないからです。また、JS（jQueryなど）を使用する場合、JSはページが読み込まれて準備が整うまで待機してから、幅の値の計算を開始する必要があるため、ある種の位置のジャンプが発生します。

あなたがそれをやる気があるなら、少し違う。ナビゲーション全体の最大幅をウィンドウサイズと組み合わせて定義してから、最新のブラウザーにCSSflexを使用することをお勧めします。modernizr.comを使用する場合は、IE8のCSSで分岐し、代わりにdisplay：table、table-row、table-cellを使用できます。IE7の場合は、floatを使用するだけです。

最新のブラウザでdisplay：tableを使用してみませんか？私は同じように見えるかもしれませんが、要素間のマージンゲインはフレックスとテーブルで異なります。フレックスでは、要素間のギャップは完全に同じですが（ピクセル単位で）、テーブルでは比較的同じです（つまり、広いテーブルセルは狭いテーブルセルよりも多くのスペースを取得します）

table
+--------------------------------+---------+
|      wide content in here      |  short  |
+--------------------------------+---------+
   6px                       6px  2px    2px


flex
+----------------------------+-------------+
|    wide content in here    |    short    |
+----------------------------+-------------+
  4px                     4px 4px       4px
于 2012-05-04T12:04:07.597 に答える