Question

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

select a, b
from (
   select a, b
   from table1
   order by a
   limit 100
)
order by b
limit 50

当您调整浏览器大小时，ul元素的宽度会发生变化，我尝试使用calc来训练项目的宽度，使它们相等。第一个和第三个列表项具有2px宽的左右边框。

在Chrome开发工具中，menu_container的宽度为636px。如果我检查第一个列表项并执行<ul class="menu_container"> <li class="item">Item1</li> <li class="item">Item2</li> <li class="item">Item3</li> </ul>它显示640px。但如果我做width: 100%它的宽度显示为212px。为什么这不是（640 - 12）/ 3 = 209.333？

Answer 1

<强>箱上浆：边界框

使用box-sizing：border-box，尺寸计算为，width = border + padding + width 内容，高度=边框+填充+内容的高度。

示例

两边的
width = 100px + 2px边框= 4px +两侧填充5px = 10px

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

box-sizing:borderbox属性

总计将为100px，因为border和padding来自内部

CSS calc百分比宽度和除法

1 个答案: