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

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/