境界線の幅

Question

5つのリンクを持つ水平ナビゲーションバーを作成したいとし、幅を20％に設定しました。私のリンクに1pxのボーダーを追加すると、20％以上になり、最後のリンクが新しい行に移動します！この問題を回避するにはどうすればよいですか？

することは、私はCSSボーダーが実際に要素の上ではなく、その周りになるように、私は、負のパディング値を行うことができるようになる期待していたが、それはそれはできません。

Answer 1

あなたに沿ってプレイするIE6/7を必要とする場合のいずれかの余分な内部要素を必要とするか、負のマージンを試みることができます。私の推薦のような、自分自身をあなたのNAVのためのリストを使用して、リンクに境界線を追加することです：

<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：余分な楽しみのためにあなたには、いくつかの助けを借りて、すべての最新ブラウザ（ないIE6/7）で使用できるようになりました、代わりにCSS3ボックスサイジング宣言を試すことができます。

#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

いいえ、ボックスモデルは枠線を合計にしているので、特定の幅を追加する必要がある場合は混ぜないでください。ケース100％でdiv（またはブロック要素）を入れてくださいオブジェクトを20％にしてとする必要があります。ボーダーで100％。

Answer 3

-1pxマージンが働くことがあります。 YMMV。