Как я могу заблокировать этот бар?

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

Answer 2

Хорошо, это должно сработать. Вот jsfiddle вашей навигационной панели:

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

Я приложил всю навигационную панель в DIV под названием «продолжение» и дал ему набор высоту и ширину.

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

Надеется, что это помогает :)

Answer 3

Это, вероятно, вызвано наличию ширины и границ на элементах LI. Когда вы уменьшаете масштаб, браузер может уменьшить ширину, но границы уже 1px, поэтому они не могут быть меньше. В результате общая ширина ваших LI заканчивается шире, чем ваш UL, а последний LI падает до следующей строки.

Если вы переместите границы на элементы A, а не на LI, все должно масштабироваться должным образом.

Answer 4

Я думаю, что лучший способ сделать это, устанавливая элементы Li в display: inline-block и затем используя white-space: nowrap. Это также хорошая идея, потому что вы не хотите, чтобы текст внутри ваших кнопок сломался. Однако поскольку элементы li теперь встроены, вы не должны оставлять пробелы между ними.

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