0

我有菜单，它是一个包含三个列表项的列表：

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

ul 元素的宽度会随着您调整浏览器的大小而变化，我正在尝试使用 calc 来锻炼项目的宽度，以使它们相等。第一个和第三个列表项有一个 2px 宽的左右边框。

在 Chrome 开发工具中，menu_container 的宽度是 636px。如果我检查第一个列表项并执行width: 100%它显示 640px。但如果我这样做calc((100% - 12px) / 3)，它会显示 212px 的宽度。为什么这不是 (640 - 12) / 3 = 209.333？

4

1 回答 1

0

盒子尺寸：border-box

使用 box-sizing:border-box 的尺寸计算为，宽度 = 边框 + 内边距 + 内容的宽度，高度 = 边框 + 内边距 + 内容的高度。

例子

宽度 =100px + 2px两边的边框 = 4px+5px两边的填充 =10px

总数为100px + 4px + 10px=114px

box-sizing:borderbox有财产_

总数将是100px因为borderandpadding是从内部给出的

于 2016-01-08T15:34:45.087 回答