0

ズームアウト時にナビゲーション バーが壊れないようにするにはどうすればよいですか?

これが私のコードです:-

<nav>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">How we deliver</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Our Partners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>

これが私のCSSです:-

#nav {
margin:80px 0 40px; 
list-style:none;
text-shadow: 0 -1px 3px #202020;
width:880px; 
height:34px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:8px 8px 8px 8px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 3px #8b8b8b;
letter-spacing:-1px;
font-family:Calibri;
font-size:18px;
letter-spacing:-0.5px;
font-weight:500;
}
#nav li {
display:block; 
float:left;
width:124px;
height:34px;
background-image: -o-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: -moz-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.0,        rgb(0,100,145)), color-stop(0.62, rgb(0,129,187)));
background-image: -webkit-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187)     80%);
background-image: -ms-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-color:#007fb9;
border-style:solid;
border-width:1px;
border-color:#005F82 #004A66 #005F82 #005D7F;
transition:all 0.5s ease 0s;
}
#nav li:hover {
background-image:-moz-linear-gradient(center bottom , #006491 100%, #0081BB 0%);
}
#nav li a {
text-decoration:none;
color:#FFF;
text-align:center;
color:white;
outline:medium none;
line-height:32px;
display:block;
}
#nav li:first-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:10px 0 0 10px;
border-left:none;
}
#nav li:last-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:0 10px 10px 0;
border-right:none;
width:124px;
}
nav {
width:890px;
margin-left:170px;
}

このコードをローカルで試してズームアウトするとわかるように、ナビゲーションが壊れ始めます。ただし、モバイル デバイスで試してみると、まったく問題ないように見えます。誰かがこれで私を助けてくれますか?

ありがとう ：）

4

4 に答える 4

1

わかりました、これはうまくいくはずです。これがあなたのナビゲーションバーのjsfiddleです：

http://jsfiddle.net/caedanlavender/97yGC/27/

ナビゲーション バー全体を「cont」という div で囲み、高さと幅を設定しました。

#cont{
 width:890px;
 height:34px;
 letter-spacing:-1px;
 font-family:Calibri;
 font-size:18px;
 letter-spacing:-0.5px;
 font-weight:500;
 }

お役に立てれば ：）

于 2013-04-14T22:59:54.110 に答える
1

#nav liスタイルに以下を追加して、これを修正しました。

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box

このスニペットはhttps://stackoverflow.com/a/1274647/2277682からリサイクルされました

于 2013-04-14T23:11:23.603 に答える
0

display: inline-blockこれを行うより良い方法は、li 要素を に設定してからを使用することだと思いますwhite-space: nowrap。ボタン内のテキストが壊れたくないので、これも良い考えです。ただし、li 要素はインラインになっているため、それらの間に空白を入れてはなりません。

http://jsfiddle.net/eUR5H/1/

于 2013-04-15T00:12:57.283 に答える
0

LI 要素に幅と境界線があることが原因のようです。ブラウザをズームアウトすると幅を縮小できますが、境界線はすでに 1px であるため、これ以上小さくすることはできません。その結果、LI の合計幅は UL よりも広くなり、最後の LI は次の行に落ちます。

境界線を LI ではなく A 要素に移動すると、すべてが適切にスケーリングされます。

于 2013-04-14T23:03:16.493 に答える