输入文本框宽度与父级相同

Question

我怎样才能有一个继承其容器宽度的文本框？

例如，我有一个div，里面有一个文本框。

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

我想要做的是当我调整浏览器大小时，文本框必须遵循其父div的宽度。

使用上面的代码，每当我将浏览器调整为较小的宽度时，文本框总是会溢出它的容器。

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/

Answer 2

只需将style='width:100%;'（或您需要多少％）添加到输入

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

Answer 3

您是否尝试将输入宽度设置为100％？ e.g。

input {width:100%;}