输入框的宽度与父元素相同

Question

如何使文本框继承其容器的宽度？

例如，我有一个包含文本框的 div。

<div id='content' style='width:100%;'>
    <input type='text' name='txtUsername'>
</div>

我想要实现的功能是，当我调整浏览器大小时，文本框必须跟随其父div的宽度而变化。使用上述代码时，每当我将浏览器调整为较小的宽度时，文本框总是溢出其容器。

- rhy

Answer 1

你应该将 box-sizing:border-box 与 width:100% 一起使用。 这样，input 将适合容器的100％宽度，但不会因为添加了 input 的内边距而溢出。

#content input
{
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

实时演示： http://jsfiddle.net/745Mt/1/

更多有关使用示例的box-sizing CSS属性的信息：http://css-tricks.com/box-sizing/

- keaukraine

Answer 2

只需在输入框中添加 style='width:100%;' （或所需的百分比），即可实现宽度自适应。

  <div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>

- Max Novich

Answer 3

你尝试过将输入框的宽度设置为100%吗？例如：

input {width:100%;}

- AGB