调整浏览器大小时CSS边框的宽度 [英] CSS border effecting width when resizing browser

问题描述

我使用 ul 和 li 做了两个简单的导航菜单。一个没有边框，另一个有边框。这两个菜单的宽度固定为400px。

I made two simple navigation menu using ul and li. One without border and another with border. The width of the both menu is fixed with 400px.

在第一个菜单中，我给每个 li 在第二个菜单中，根据宽度计算，我给出了左右两边的固定宽度为98px和1px的边框，每个 li

In ther first menu I gave each li a fixed width of 100px and in the second menu according the width calculation I gave fixed width of 98px and 1px border on left and right which in total is 100px for each li.

现在我的问题是当我使用Ctrl + - 调整浏览器分辨率时，第一个菜单保持为任何分辨率，但在第二个菜单中，最后一个元素正在移动到第一个元素下的下一行。

Now my question is when I am resizing the the browser resolution using the "Ctrl + -" the first menu stays as it is in any resolution but in the second menu the last element is shifting to the next line under the first element.

我想知道为什么会发生这种情况，以及如何解决它。

I want to know why this happens and how to resolve it. Thanks in advance.

这里是JSFiddle链接： http://jsfiddle.net/jhz56/

Here is the JSFiddle Link : http://jsfiddle.net/jhz56/

推荐答案

边框宽度不会与li宽度，这就是为什么菜单打破。所以一个解决方案可以简单地是：

The border width doesn't scale together with the li width, that's why the menu breaks. So one solution can simply be:

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

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

这篇关于调整浏览器大小时CSS边框的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！