有没有办法将元素锁定到它的容器的左右边缘，以便它伸展以填充该容器？

Question

有没有办法将元素位置锁定到它的容器的左右边缘，以便它伸展以填充该容器？

我一直在设置左右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;
}

这是我得到的：

这就是我想要的：

这是我到目前为止所拥有的：

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

{{1}}

换句话说，是否有一种方法可以指定左右属性，并且元素“拉伸”可以不拉伸但是调整大小。在其他平台上可以看到这种类型的布局功能，我想知道它是否可以在网上找到。

Answer 1

是的，但绝对元素将占据其容器的完整TOTAL宽度。因此，您必须进行计算以确定尺寸。

#Button1199  {
   position:absolute;
   top:20px;
   left:20px;
   right:20px;
   width: calc(100% - 40px);
}

Answer 2

集

Width:100%;

到按钮

如果需要，设置保证金