2

と を使って 2 つの簡単なナビゲーション メニューを作成ulしliました。1つは縁なし、もう1つは縁あり。両メニューの横幅は400px固定です。

最初のメニューではそれぞれliに 100px の固定幅を与え、2 番目のメニューでは幅の計算に従って 98px の固定幅と左右に 1px の境界線を与えました。これは合計でそれぞれ 100px ですli。

ここで私の質問は、「Ctrl + -」を使用してブラウザーの解像度のサイズを変更するときです。最初のメニューはどの解像度でもそのままですが、2 番目のメニューでは最後の要素が最初の要素の下の次の行に移動します。

どうしてこうなったのか、どうすれば解決できるのか知りたいです。前もって感謝します。

JSFiddle リンクは次のとおりです: http://jsfiddle.net/jhz56/

4

2 に答える 2

3

境界線の幅は、li の幅と一緒にスケーリングされないため、メニューが壊れます。したがって、1つのソリューションは次のようになります。

.nav2 ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/jhz56/1/

于 2013-10-27T10:54:38.117 に答える
1

この問題は簡単です。を使用して幅を設定したと言っていますがpx、これは画面サイズを変更すると変更されるため、このエラーを最小限に抑えることができます。%すべての画面サイズで、常に独自の幅と高さを持つように使用することをお勧めします

このように、箱から出てくることはありません。私はあなたのフィドルをチェックしました。どれだけズームしても、両方のリストがその場所にありました。

次にできることはMedia Query、各画面サイズで、要素が画面サイズとニーズに完全に適合する新しいスタイルを取得するようにすることです。

で押すCtrlと+、要素がズームされ、ブラウザーからより多くのピクセルを取得する可能性が高くなります。これにより、指定された幅に収まるようにブロックが下に移動し、要素を押す-と収縮して左に近づきliます。このように、それらの特性が変化します。

ここにフィドルがありますhttp://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/ズームインまたはズームアウトしようとすると、要素の幅とその他すべてのプロパティが変更されます。

の代わりにmin-widthandを使用できます。確認するために、常に合計幅を最小値と最大値として取得します。max-widthwidth

div {
  max-width: 500px;
  min-width: 500px;
  width: 500px; 
}

http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/1/このフィドルでは、わずかなズームインとズームアウトで UI にエラーが発生することはありませんが、多くのズーム (250% 以上) では機能しません。したがって、ここではメディアクエリがオプションになります。

このように、ズームインまたはズームアウトしても、要素の幅は常に です500px。これはあなたにとって便利かもしれません！

于 2013-10-27T08:20:21.907 に答える