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

Question

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

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

现在我的问题是，当我使用“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/

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/在这个小提琴中，轻微的放大和缩小不会在UI中引起错误，但它不适用于很多缩放（250％+）。所以这里可以选择媒体查询。

这样，即使放大或缩小，元素的宽度也始终为500px。这对你来说可能很方便！