液体の水平方向のULベースのメニューで、可変間隔を使用

Question

PreNote：これは重複していません。私はいくつかの質問をチェックして、私の詳細は異なっています。

は、私は現在、ウェブページ上でこのような水平方向のナビゲーションメニューを持っている：

メニューはul要素です。問題は現在、私は余白を明示的に指定しなければならないということです。つまり、liの間隔を明示的に取得する必要があります。可能な限り間隔を60pxにしたいが、ブラウザが縮小されてもメニューの間隔があまり大きくならないようにすると、間隔が縮まるようにする。

どうすればこの問題を解決できますか？

Answer 1

私はあなたが優雅な聖なるウバー・グレイルを探していると思います。私は間違っているかもしれないが、私はそれがCSSだけでは可能ではないと思う。最大幅を持つような最大マージンのようなものはないからです。そしてJS（jQueryなど）を使用すると、JSがページが読み込まれて準備ができてから幅の値の計算が始まるまで待機する必要があるため、一種のジャンプがあります。

少しでもやりたいと思えば。私はウィンドウサイズと結合されたナビゲーション全体の最大幅を定義し、最新のブラウザにCSSフレックスを使用することをお勧めします。あなたがmodernizr.comを使用している場合は、IE8用のCSSでブランチし、代わりにdisplay：table、table-row、table-cellを使用することができます。 IE7の場合は、floatを使用します。

最新のブラウザでは表を使用しないのはなぜですか？私は同じように見えるかもしれませんが、要素間のマージンゲインはフレックスとテーブルで異なります。フレックスの要素間のギャップは絶対に（賢明なピクセルを意味する）と同じですが、彼らはテーブルでは比較的同じです（広いテーブルのセルが狭いものより多くのスペースを得るという意味）

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


flex 
+----------------------------+-------------+ 
| wide content in here | short | 
+----------------------------+-------------+ 
    4px      4px 4px  4px