如何將1px邊框添加到寬度爲百分比的div中？

我有這個jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/這解釋了我的問題。如何將1px邊框添加到寬度爲百分比的div中？

我想沿頂部的菜單項是窗口的20％，但我也希望他們有一個1px的右邊框。

正如你可以看到它稍微出來，這是非常明顯的。

---------------------------------------------- 
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 | 
---------------------------------------------- 
|   row one needs to be same   |  
----------------------------------------------

我不認爲一個百分比的邊界會工作，因爲那不會是用不同的窗口大小一致。

有沒有人有任何建議，我怎麼能做到這一點？

來源

2011-11-26 Tara Irvine

你搗鼓我不起作用。第五個菜單項包裝到第二行。 – dnuttle

我也是，但寬度較高時很好。我看到的問題更多的是1px + 20％+ 1px + 20％+ 1px + 20％+ 1px + 20％+ 1px + 20％+ 1px> 100％。這就是爲什麼大多數時候我設計我的網站的最小屏幕寬度，然後居中所有的內容。 – Zoidberg

爲此，您可以使用CSS box-sizing此：

這樣的：

#nav_1232938 li, .row { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

來源

2011-11-26 12:59:13 sandeep

不能相信這個答案存在！我認爲花車+邊界>邊界= BUG，聲譽++ – cwiggo

我只是碰到了一個項目，我不得不做同樣的事情。雖然盒子大小可能是最好的答案，但我決定使用生成的：元素之後（因爲我的項目特定的一些問題）。

我將li的寬度+填充x的數量設置爲等於100％，然後絕對定位12px寬度，100％高度li：元素頂部之後：0，right：-6px;每個李。李：最後一個孩子正好漂浮，所以它總是與下面的方塊齊平（瀏覽器從不同的百分比計算分數像素餘量，所以有時你的浮動元素最右側有一個空間，即使元素的寬度增加了高達100％）和李：最後孩子：後被設置爲顯示：無。

這是你的爵士小提琴的編輯爲例：http://jsfiddle.net/DZLTJ/12/

注：在我的網頁，在％設置填充絕不會比小：後元素的寬度像素設置，所以內容框將永遠不被模糊。

Box-sizing和：after在所有瀏覽器後都支持ie 7，但是：last-child實際上支持較少，不支持ie 8.像我說過的，box-sizing可能是一個更好的選擇，但在我的情況下絕對定位後的元素更適合 - 認爲值得一提的是，如果它適用於其他人。

來源

2012-02-15 05:39:11 RobW

年後：使用框尺寸。 – RobW

對於邊框，可以使用

outline: 1px solid black;

這適用於所有現代瀏覽器，但不是在IE6和7

來源

2012-02-20 12:30:18 Jorre

如何將1px邊框添加到寬度爲百分比的div中？

回答

相關問題