html - 调整浏览器大小时CSS边框影响宽度

Question

我使用ul和li制作了两个简单的导航菜单。一种是无边框的，另一种是有边框的。两个菜单的宽度固定为400px。

在第一个菜单中，我为每个 li 指定了 100px 的固定宽度，在第二个菜单中，根据宽度计算，我为左侧和右侧指定了 98px 的固定宽度和 1px 边框，总共为 100px对于每个 li。

现在我的问题是，当我使用“Ctrl + -”调整浏览器分辨率大小时，第一个菜单在任何分辨率下都保持不变，但在第二个菜单中，最后一个元素将移动到第一个元素下的下一行.

我想知道为什么会发生这种情况以及如何解决。 提前致谢。

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

Answer 1

边框宽度不与 li 宽度一起缩放，这就是菜单中断的原因。因此，一种解决方案可以简单地是:

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

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