如何将 1px 边框添加到宽度为百分比的 div？答案

【问题标题】：How do I add 1px border to a div whose width is a percentage?如何将 1px 边框添加到宽度为百分比的 div？
【发布时间】：2012-01-06 21:21:15
【问题描述】：

我有这个 jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/，它解释了我的问题。

我希望顶部的菜单项占窗口的 20%，但我也希望它们有 1px 的右边框。

正如您所看到的，它略微偏出，这非常明显。

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

我不认为百分比边框会起作用，因为那样它就不会与不同的窗口大小保持一致。

有人对我如何做到这一点有任何建议吗？

【问题讨论】：

你的小提琴不适合我。第五个菜单项换到第二行。
我也是，但在更高的宽度上它很好。我看到的问题更多与 1px + 20% + 1px + 20% + 1px + 20% + 1px + 20% + 1px + 20% + 1px > 100% 有关。这就是为什么大多数时候我将我的网站设计为最小屏幕宽度，然后将所有内容居中。

标签： css

【解决方案1】：

为此，您可以使用 css box-sizing：

像这样：

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

【讨论】：

不敢相信这个答案存在！我认为浮动 + 边框 > 边框 = BUG，声誉++

【解决方案2】：

我刚刚遇到一个项目，我必须做同样的事情。尽管 box-sizing 可能是最好的答案，但我还是决定使用生成的 :after 元素（因为我的项目存在一些问题）。

我将 li 的（宽度 + 填充）x li 的数量设置为 100%，然后绝对定位 12px 宽度，100% 高度 li:after 元素到 top:0, right:-6px;每里。 Li:last-child 是向右浮动的，因此它始终与下面的框齐平（浏览器根据百分比计算小数像素余数的方式不同，因此有时您在浮动元素的最右侧有一个空间，即使元素的宽度增加了高达 100%），并且 li:last-child:after 设置为 display:none。

这里以编辑你的 js fiddle 为例：http://jsfiddle.net/DZLTJ/12/

注意：在我的页面中，以 % 设置的填充永远不会小于以 px 设置的 :after 元素的宽度，因此内容框永远不会被遮挡。

在 ie 7 之后的所有浏览器都支持 Box-sizing 和 :after，但 :last-child 实际上支持较少，没有 ie 8。就像我说的，box-sizing 可能是更好的选择，但在我的情况下绝对定位在 element 之后更合适——认为如果它也适用于其他任何人，它也值得一提。

【讨论】：

多年后：使用盒子尺寸。

【解决方案3】：

对于边框，可以使用

outline: 1px solid black;

这适用于所有现代浏览器，但不适用于 IE6 和 7

【讨论】：