3

まず、タイトルである一口で申し訳ありません。

流体コンテナーとさまざまなサイズのアイテムを使用してレスポンシブ ナビゲーションを作成しようとしています。最初と最後のアイテムをコンテナの端に揃えたまま、アイテム間の間隔をすべてのアイテムで同じサイズに保つことが可能かどうかを知る必要があります。

望ましい結果 サイズ変更された結果

赤はすべての要素間で同じである必要がある間隔を示しています

固定幅で上記のようなことをかなり簡単に行うことができますが、ウィンドウのサイズが変更されるとすぐに、ギャップを適切なサイズに拡大/縮小することができないようです。

パーセンテージ マージンがこれに対する答えのように見えますが、コンテナーのサイズは変更できますが、内部のアイテムは変更できないため、ウィンドウが小さすぎるとアイテムが次の行に広がるか、ウィンドウが大きすぎると行の最後に到達しません。 . また、要素を固定幅にしてみましtext-align:center;たが、間隔はデザイナーが望むものではありません。

すべての最新ブラウザおよび IE 7+ と互換性がある必要があります

ここに(ひどく作られた)フィドルがあります:http://jsfiddle.net/GGwdW/

4

1 に答える 1

2

この解決策を確認してください。役に立つかもしれません: "text-align: justify;" インラインブロック要素は適切ですか?

古い IE には text-align-last プロパティがあります。

于 2013-07-25T15:34:30.087 に答える