如何让元素锁定容器左右边缘并自适应填充容器？

你遇到的问题其实是因为表单元素（比如<input type="button">）默认带有浏览器赋予的固定宽度，就算你设置了left和right属性，这个默认宽度会限制元素的拉伸行为，导致效果不符合预期。

解决方案：重置宽度并调整盒模型 #

只需要给按钮添加两行CSS属性，就能让它自适应填充left:20px和right:20px之间的空间：

#Button1199 {
  position:absolute;
  top:20px;
  left:20px;
  right:20px;
  width: auto; /* 覆盖浏览器默认的固定宽度，允许元素拉伸 */
  box-sizing: border-box; /* 确保按钮的内边距、边框不会超出容器范围 */
}

完整代码示例 #

CSS

body { 
  -moz-osx-font-smoothing: grayscale; 
  font-family:Verdana; 
  font-weight:normal; 
  font-size:12px; 
}
#BorderContainer2085 { 
  position:absolute; 
  top:30px; 
  left:37px; 
  width:240px; 
  height:160px; 
  display:inline-block; 
  border-width:1px; 
  border-color:#696969; 
  border-style:solid; 
  border-radius:0px; 
}
#Button1199 {
  position:absolute;
  top:20px;
  left:20px;
  right:20px;
  width: auto;
  box-sizing: border-box;
}

HTML

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

原理说明 #

当绝对定位的元素同时设置了left和right（或top和bottom）时，浏览器会自动计算元素的宽度（或高度），使其填充两个属性值之间的空间。但前提是元素没有固定的宽/高限制——而按钮这类表单元素恰好有默认的固定宽度，所以必须用width: auto来解除这个限制。

添加box-sizing: border-box是为了避免按钮的内边距、边框导致总宽度超出left和right定义的范围，让布局更精准。

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