html - 我如何防止这个栏杆被打破？

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

我通过将以下内容添加到您的 #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