如何让元素动态填充容器宽度，设边距且不溢出容器？

这问题太常见啦！你现在按钮溢出容器，是因为width:100%是取父容器的完整宽度，再加上左右各20px的margin，总宽度直接超过了容器尺寸，可不就溢出了嘛～给你几个实用的解决办法：

方法1：用calc()计算精确宽度 #

直接通过CSS的calc()函数，把按钮的宽度设为父容器宽度减去左右margin的总和，这样按钮的总占用宽度刚好和容器一致：

body { 
  -moz-osx-font-smoothing: grayscale; 
  font-family:Verdana; 
  font-weight:normal; 
  font-size:12px; 
} 
#BorderContainer2085 { 
  position:absolute; 
  top:30px; 
  left:37px; 
  width:340px; 
  height:160px; 
  display:inline-block; 
  border-width:1px; 
  border-color:#696969; 
  border-style:solid; 
  border-radius:0px; 
} 
#Button1199 { 
  position:absolute; 
  top:19px; 
  margin-left:20px; 
  margin-right:20px; 
  width: calc(100% - 40px); /* 100%减去左右margin的总和（20px*2） */
}

<div id="BorderContainer2085"> 
  <input id="Button1199" type="button" value="Button"> 
</div>

这个方法简单直接，适合快速调整单个元素的场景。

方法2：用父容器的padding替代按钮的margin #

把按钮的margin去掉，转而给父容器添加左右padding，再配合box-sizing: border-box确保容器总宽度不变，按钮设置width:100%就会自动填充padding内的空间：

body { 
  -moz-osx-font-smoothing: grayscale; 
  font-family:Verdana; 
  font-weight:normal; 
  font-size:12px; 
} 
#BorderContainer2085 { 
  position:absolute; 
  top:30px; 
  left:37px; 
  width:340px; 
  height:160px; 
  display:inline-block; 
  border-width:1px; 
  border-color:#696969; 
  border-style:solid; 
  border-radius:0px; 
  padding: 0 20px; /* 左右添加20px内边距 */
  box-sizing: border-box; /* 让padding算进容器的总宽度，避免容器本身变宽 */
} 
#Button1199 { 
  position:absolute; 
  top:19px; 
  width:100%; /* 填充父容器的padding区域 */
}

<div id="BorderContainer2085"> 
  <input id="Button1199" type="button" value="Button"> 
</div>

这种方式更符合“容器负责内边距，子元素负责填充”的布局逻辑，后续如果容器内加其他元素，也能统一保持边距。

方法3：使用Flexbox布局（推荐） #

Flexbox是现代前端布局的首选方案，它能更灵活地处理自适应宽度的需求，就算容器宽度变化，按钮也能自动适配：

body { 
  -moz-osx-font-smoothing: grayscale; 
  font-family:Verdana; 
  font-weight:normal; 
  font-size:12px; 
} 
#BorderContainer2085 { 
  position:absolute; 
  top:30px; 
  left:37px; 
  width:340px; 
  height:160px; 
  display:flex; /* 开启Flex布局 */
  border-width:1px; 
  border-color:#696969; 
  border-style:solid; 
  border-radius:0px; 
  padding: 0 20px; /* 给容器加左右内边距 */
  align-items:flex-start; /* 让按钮顶部对齐，对应原来的top:19px */
} 
#Button1199 { 
  margin-top:19px; /* 替代原来的position:absolute的top值 */
  flex:1; /* 让按钮自动填充容器内的剩余可用宽度 */
}

<div id="BorderContainer2085"> 
  <input id="Button1199" type="button" value="Button"> 
</div>

如果不想给父容器加padding，也可以直接给按钮加margin-left:20px; margin-right:20px，flex:1依然能让按钮填充剩余空间，这种方式适配性更强，适合复杂的响应式布局。

内容的提问来源于stack exchange，提问作者1.21 gigawatts