0

私は3つのリスト項目を持つリストであるメニューを持っています:

<ul class="menu_container">
  <li class="item">Item1</li>
  <li class="item">Item2</li>
  <li class="item">Item3</li>
</ul>

ブラウザーのサイズを変更すると、ul 要素の幅が変化します。項目の幅が等しくなるように、calc を使用してワークアウトしようとしています。1 番目と 3 番目のリスト項目には、幅 2px の左右の境界線があります。

Chrome 開発ツールでは、menu_container の幅は 636px です。最初のリスト項目を調べて実行width: 100%すると、640px と表示されます。しかし、私が行うcalc((100% - 12px) / 3)と、幅が 212px と表示されます。なぜこれは (640 - 12) / 3 = 209.333 ではないのですか?

4

1 に答える 1

0

ボックスサイズ:ボーダーボックス

box-sizing:border-box では、幅 = ボーダー + パディング + コンテンツの幅、および高さ = ボーダー + パディング + コンテンツの高さとして寸法が計算されます。

例

幅 =100px + 2px両側のボーダー = 4px+ 両側のパディング5px=10px

合計は100px + 4px + 10px=になります。114px

プロパティbox-sizing:borderbox付き

内からandが与えられている100pxため、合計は になります。borderpadding

于 2016-01-08T15:34:45.087 に答える