百分比边框的宽度

Question

假设我想制作一个带有五个链接的水平导航栏，并将宽度设置为20％。只要我给链接添加1px边框，它们就会变得比20％大，最后一个链接会移动到新的一行！我怎样才能解决这个问题？

我希望CSS会允许我做一个负填充值，这样边框实际上会覆盖元素而不是围绕它，但是它不允许这样做。

Answer 1

如果你需要IE6/7来玩，你可能需要额外的内部元素，或者你可以尝试负边距。我的建议是使用一个列表为您导航，并添加边框链接本身，因为这样的：

<ul id="nav"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul> 

这 无疑是 （更新：用于在HTML5现在就可以。使用围绕列表的nav元素）导航的最多语义标记。然后你的CSS很简单：

#nav li { 
    float: left; 
    width: 20%; 
} 

#nav li a { 
    display: block; 
    border: 1px solid #000; 
} 

OR：额外的乐趣，你现在可以尝试CSS3盒大小的声明相反，适用于所有现代浏览器（不是IE6/7）一些帮助：

#nav li { 
    /* Opera 8.5+ and CSS3 */ 
    box-sizing: border-box; 
    /* Firefox 1+ */ 
    -moz-box-sizing: border-box; 
    /* IE8 */ 
    -ms-box-sizing: border-box; 
    /* Safari 3+ */ 
    -webkit-box-sizing: border-box; 

Answer 2

nope，box模型添加边框到总数，所以我不会混合它们，如果它需要加上一个特定的宽度，在你的情况下100％，把一个div（或一些块元素）对象，需要20％，并使其具有边框的100％。

Answer 3

-1px的边距可能会起作用。因人而异。