幅がパーセンテージのdivに1ピクセルの枠線を追加するにはどうすればよいですか？

Question

私はこの問題を説明している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

は、私はちょうど私が同じことをしなければならなかったプロジェクトに走りました。ボックスサイズはおそらく最良の答えですが、私はgenerated：after要素を使用することに決めました（私のプロジェクトに固有のいくつかの問題のため）。

liの（width + padding）xの数を100％に設定し、絶対配置の12px幅、100％の高さを設定します。li：要素を上に移動した後：0、各liの。 Li：last-childは右に浮かべて、常に下のボックスと一直線に並んでいました（ブラウザはパーセンテージから分数ピクセルの残余を別々に計算するため、要素の幅が追加されても浮動要素の右端にスペースがあることがあります最大100％）、およびli：last-child：afterがdisplay：noneに設定されていました。

ここでは一例として、あなたのjsフィドルの編集です：http://jsfiddle.net/DZLTJ/12/

注：私のページでは、％に設定されたパディングがより小さくなることはない：要素の幅をピクセルで設定した後、そのコンテンツボックスです隠されることはありません。

ボックスサイズと：はすべてのブラウザでサポートされています。つまり、last-childは実際にサポートされていません。つまり、8です。私が言ったように、ボックスサイズはおそらくより良い選択ですが、絶対的に配置された要素はより良いフィット感でした。他の人にとってもそうだと言えるでしょう。境界線の

Answer 3

、あなたは、これはすべての近代的なブラウザではなく、IE6で動作し、7