Fatal编程技术网
  • html/
  • Html CSS计算百分比宽度和分割

Html CSS计算百分比宽度和分割

html css

Html CSS计算百分比宽度和分割,html,css,css-calc,Html,Css,Css Calc,我的菜单是一个包含三个列表项的列表： <ul class="menu_container"> <li class="item">Item1</li> <li class="item">Item2</li> <li class="item">Item3</li> </ul> 项目1 第2项 第3项 ul元素的宽度会随着浏览器大小的改变而改变，我正在尝试使用calc计算项目的宽度，使它

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

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

    

  • 项目1
    • 
第2项
第3项
ul元素的宽度会随着浏览器大小的改变而改变，我正在尝试使用calc计算项目的宽度，使它们相等。第一个和第三个列表项具有2倍宽的左右边框

在Chrome开发工具中，菜单容器的宽度是636px。如果我检查第一个列表项并执行
width:100%
操作，则显示640px。但是如果我做
calc（（100%-12px）/3）
它会显示212px的宽度。为什么不是（640-12）/3=209.333？

框大小：边框框

使用框大小：边框框，尺寸计算为，宽度=边框+填充+宽度 高度=边框+填充+内容高度

示例

宽度=
100px+2px
两侧边框=
4px
+padding
5px
两侧边框=
10px

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

使用
框大小：borderbox
属性

总数将为
100px
，因为
边框和
填充是从内部提供的
您是否添加了
框大小：边框框
谢谢，这正是我想要的！