html - 拉伸 input[type="text"] 以填充空间

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

If you don't need to support IE 7 or less, you can probably use the Box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp