Question

我有以下设置：

<div style="position: fixed; margin: 0px; background-color: black; height: 100px; width: 100%;">
  <input type="text" style="position: absolute; display: block; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: 30px 30px 15px 30px;" />
</div>

目的是拉伸标记以填充包含<div>标记的空间（当然，边距较小）。如果我将<input>标记更改为<div>标记，则此功能适用于所有最新浏览器，但如此处所示，此功能仅适用于WebKit浏览器（Chrome和Safari）。有没有办法在FF和IE9 +中获得所需的效果（只需IE10就足够了）？

Answer 1

尝试以％表示宽度输入.... 这件事对你有用

<div style="position: fixed; margin: 0px; background-color: black; height: 100px; width: 100%;">
  <input type="text" style="position: absolute; display: block; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: 30px 5% 15px 5%;width:90%" />
</div>

Answer 2

如果您不需要支持IE 7或更低版本，您可以使用Box-sizing属性：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

拉伸输入[type =“text”]以填充空间

2 个答案: