Question

如何在缩小时保持导航栏不被破坏？

这是我的代码： -

<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;
}

正如您将看到的，如果您在本地尝试此代码并缩小，导航将开始中断。虽然当你在移动设备上试用它时看起来非常好。有人可以帮我解决这个问题吗？

谢谢：）

Answer 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;
 }

希望这会有所帮助：）

Answer 2

我通过在#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

中回收

Answer 3

这似乎是由LI元素上的宽度和边框引起的。缩小浏览器时可以减小宽度，但边框已经是1px，因此它们不能变小。因此，LI的总宽度最终会比UL更宽，最后一个LI会下降到下一行。

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

Answer 4

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

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

如何防止这个酒吧破裂？

4 个答案: