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

Question

ul我使用和制作了两个简单的导航菜单li。一个没有边界，一个有边界。两个菜单的宽度固定为 400 像素。

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

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

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

这个问题很简单。您是说您已经使用设置了宽度px，一旦您更改屏幕尺寸，宽度也会发生变化，以便最大限度地减少此错误。我会推荐使用%，以便在每个屏幕尺寸中，它都应该有自己的宽度和高度

这样，它就不会从盒子里出来。我检查了你的小提琴，无论放大多少，这两个列表都在他们的位置上。

您可以使用Media Query的第二件事是确保对于每个屏幕尺寸，元素都会获得一种新样式，以完美地适应屏幕尺寸和需求。

当您按下Ctrlwith+时，元素会缩放，并且更有可能从浏览器中获取更多像素。这使它向下移动一个块以适应提供的宽度，当您按下-元素时，它会收缩并靠近 left li。这样，它们的属性就会发生变化。

这是一个小提琴，http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/当您尝试放大或缩小时，元素将改变其宽度和所有其他属性。

您可以使用min-widthandmax-width代替width. 为了确保，它总是将总宽度作为其最小值和最大值。

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

http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/1/在这个小提琴中，轻微的放大和缩小不会导致 UI 出现错误，但它不适用于大量缩放（250%+）。所以这里媒体查询将是选项。

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

2 回答 2