2012-04-20 10 views
4

問題は次のとおりです。私はcssを使用して水平メニューに変わる基本的な順序付けられていないリストを持っています。ズーム時にジャンプするメニュー要素

Unzoomed:ブラウザでズームインまたはズームアウトしながら、しかし、メニュー項目は、次のような次の行にジャンプ

|メニュー1 | |メニュー2 | |メニュー3 | |メニュー4 |

ズーム:

|メニュー1 | |メニュー2 | |メニュー3 |
|メニュー4 |

メニュー項目がそのようにジャンプしないようにするにはどうすればよいですか?

+0

を適用してみてください。私はあなたがピクセル単位で幅を与えていると思うので、ズームして次の幅に丸めると、合計は100%より大きくなります。ピクセルの代わりに%ディメンションを使用してみることもできます。 – SinistraD

+0

%を使用すると、ほとんどの場合、問題が安定したように見えます。ありがとうSinistraD。 – Tomkarho

+0

float親(ul) また、私はjuleryのソリューションを持っています。もしul –

答えて

3

ul(またはulをラップする可能性のあるdiv)の固定された(最小)寸法で実験し、オーバーフロー設定を与えてください。次のようなものがあります:

ul { 
    width: 750px; 
    overflow:auto; 
} 
+0

の中心に揃えたい場合、ニースアプローチをしてください。アイテムに境界線がある場合、最後のアイテムは右の境界線を失います。 – SinistraD

+0

@SinistraD:どうですか? –

0

私はSinsitraDに同意します。少し余裕を残してください。あなたがパーセントを使用しているなら、私は通常〜2%の手当を残すようにします。あなたが選んだ単位としてpxを選ぶならば、予想される1〜2%の許容差は、ほとんどの丸め誤差をカバーします。

ズームの動作がブラウザ間で一貫していないことがわかります。これは、ほとんどのブラウザでは、ズ​​ーム時に異なる方法を使用してサイズが計算されるためです。

0

は、私が見てきた1つの本当に共通の問題ザッツposition: relativeliの要素

関連する問題