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

这似乎是由 LI 元素上的宽度和边框引起的。当你缩小浏览器可以减小宽度，但边框已经是 1px，所以它们不能再小了。结果，您的 LI 的总宽度最终比您的 UL 更宽，最后一个 LI 下降到下一行。

如果您将边框移动到 A 元素而不是 LI 上，那么一切都应该正确缩放。

于 2013-04-14T23:03:16.493 回答
0

我认为更好的方法是将 li 元素设置为display: inline-block然后使用white-space: nowrap. 这也是一个好主意，因为您不希望按钮内的文本中断。但是，由于 li 元素现在是内联的，因此您不能在它们之间留下空格。

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

于 2013-04-15T00:12:57.283 回答