調整瀏覽器大小時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。這可能對你很方便！