html - パーセントで定義されている場合に、要素の幅をピクセル単位で縮小する方法

Question

それぞれの幅が に設定されている 4 つの要素があり25%ます。それらはページの幅を完全に埋めます。

1pxそれぞれに隙間を作りたい。これを行うと（margin-right: 1px;たとえば）、最後の要素が次の行にオーバーフローします。1pxそもそも幅をピクセル単位で計算せずに、各要素の幅を減らすにはどうすればよいですか?

Answer 1

コメントの@Lubnahの助けを借りて、私は自分で解決策を見つけました。

.tab-list li {
  margin-right: -1px;
  border-left: 1px solid #fff;
}

.tab-list li:first-of-type {
  border-left: none;
  margin-right: 0px;
}

Answer 2

CSS を使用できますcalcが、ブラウザーのサポートは大ざっぱです。

width: calc( 25% - 1px );
width: -moz-calc( 25% - 1px );
width: -webkit-calc( 25% - 1px );

Answer 3

幅はコンテナ内で計算されます。設定したパディングまたはマージンが幅に追加されます。

幅を 23%、余白を 1% に設定します。

左マージン (1) プラス幅 (23) プラス右マージン (1) = 25. つまり、ページに 4 回配置すると合計 100 になります。

Answer 4

ボックスのサイズを次のようbox-sizing:border-box に使用し、背景と同じ色の 1 ピクセルの右の境界線を使用します。

 .box{
      width:25%;
      box-sizing:border-box;
      border-right: 1px solid "same color as your background"
 }

Answer 5

使用box-sizing: border-box;と境界線。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div {
  width: 25%;
  border-right: 1px solid right;

}

Answer 6

各要素内に幅 auto と margin-right:1px の内部 div を配置することで、少しごまかすことができます

このフィドルを参照してください: http://jsfiddle.net/7R6zZ/

<div class="outer">
 <div class="inner">1</div>
</div>
<div class="outer">
 <div class="inner">2</div>
</div>
<div class="outer">
 <div class="inner">3</div>
</div>
<div class="outer">
 <div class="inner">4</div>
</div>

.outer {
 width:25%;
 float:left;
}
.outer .inner {
 width:auto;
 margin-right:1px;
 background:#999;
 min-height:300px;
}