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

Question

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

在我给每个li的100px的固定宽度疗法第一菜单和在根据宽度计算我给98px与像素边框的宽度固定在左侧和右侧，其在总是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/

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。这可能对你很方便！