CSS граница ширина при изменении размера браузера

Question

Я сделал два простых меню навигации, используя ul и li. Один без границы, другой с границей. Ширина обоих меню фиксирована с 400px.

В Ther первого меню я дал каждую фиксированную ширину 100px li, а во втором меню согласно расчету ширины Я дал фиксированную ширину 98px и 1px границы слева и справа, которые в общей сложности на 100 пиксели для каждого li.

Теперь мой вопрос заключается в изменении размера разрешения браузера с помощью «Ctrl +» - первое меню остается в любом разрешении, но во втором меню последний элемент переходит на следующую строку под первым элемент.

Я хочу знать, почему это происходит и как его решить. Спасибо заранее.

Вот JSFiddle Ссылка: http://jsfiddle.net/jhz56/

Answer 1

Ширина границы не масштабируется вместе с литой шириной, поэтому меню разбивается.Таким образом, одно решение может быть просто:

.nav2 ul li { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

http://jsfiddle.net/jhz56/1/

Answer 2

Этот вопрос очень прост. Вы говорите, что вы установили ширину, используя px, что также изменится после изменения размера экрана, чтобы свести к минимуму эту ошибку. Я рекомендую использовать % так, чтобы в каждом размере экрана он всегда должен иметь свою собственную ширину и высоту.

Таким образом, это не будет из его коробки. Я проверил вашу скрипку, оба списка были на их месте независимо от того, насколько сильно масштабируются.

Во-вторых, вы можете использовать Media Query, чтобы убедиться, что при каждом размере экрана элемент приобретает новый стиль, идеально подходящий для размера экрана и потребностей.

При нажатии Ctrl с +, элементы получить увеличение и более вероятно, займет больше пикселей из браузера. Это заставляет блок двигаться вниз, чтобы он соответствовал ширине, при нажатии - элемент сжимается и идет рядом с левым li. Таким образом, их свойства сдвигаются.

Вот скрипка, http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/ Когда вы пытаетесь увеличить или уменьшить масштаб, элемент изменит его ширину и все остальные свойства.

Вы можете использовать min-width и max-width вместо width. Чтобы быть уверенным, он всегда получает общую ширину как минимальную и максимальную.

div { 
    max-width: 500px; 
    min-width: 500px; 
    width: 500px; 
} 

http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/1/ В этой скрипке, небольшое изменение масштаба в и не приведут к ошибке в пользовательском интерфейсе, но это не работает много масштабирования (250% +). Таким образом, здесь будет запрошен медиа-запрос.

Таким образом, даже если вы увеличиваете или уменьшаете масштаб, элемент всегда будет иметь ширину 500px. Это может быть удобно для вас!