CSS 计算百分比宽度和除法

Question

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

<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？

Answer 1

Box-sizing:border-box

With box-sizing:border-box the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

例子

width = 100px + 2px border on both side = 4px + padding 5px on both side = 10px

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

和box-sizing:borderbox属性

总数将是 100px 因为 border 和 padding 是从内部给出的

CSS 计算百分比宽度和除法

CSS calc percentage width and division

html

css

css-calc