Question

我有这个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          |    
----------------------------------------------

我不认为百分比边界会起作用，因为它与不同的窗口大小不一致。

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

Answer 1

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

像这样：

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

Answer 2

我刚刚遇到了一个我必须做同样事情的项目。虽然box-sizing可能是最好的答案，但我决定使用generated：after元素（因为我的项目特有的一些问题）。

我将li的（宽度+填充）x的数量设置为等于100％，然后绝对定位12px宽度，100％高度li：元素到顶部之后：0，右：-6px;每个李。 Li：最后一个孩子正好浮动，所以它总是与下面的方框齐平（浏览器以不同的百分比计算分数像素剩余部分，所以有时你的浮动元素的最右边有一个空格，即使元素的宽度增加了高达100％）和li：last-child：after设置为display：none。

以下是您的js小提琴的编辑示例：http://jsfiddle.net/DZLTJ/12/

注意：在我的页面中，以％为单位的填充设置永远不会小于：在px中设置的元素宽度之后，因此内容框永远不会被遮挡。

Box-sizing和：after支持所有浏览器帖子即7，但是：last-child实际上支持较少，没有ie 8.就像我说的那样，box-sizing可能是更好的选择，但在我的情况下绝对定位在元素之后更合适 - 认为值得一提的是，以防其他人也是如此。

Answer 3

对于边框，您可以使用

outline: 1px solid black;

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

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

3 个答案: