百分比邊框的寬度

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的邊距可能會起作用。因人而異。