我怎样才能有一个继承其容器宽度的文本框?
例如,我有一个div,里面有一个文本框。
<div id='content' style='width:100%;'>
<input type='text' name='txtUsername'>
</div>
我想要做的是当我调整浏览器大小时,文本框必须遵循其父div的宽度。
使用上面的代码,每当我将浏览器调整为较小的宽度时,文本框总是会溢出它的容器。
答案 0 :(得分:12)
您应该将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/
答案 1 :(得分:0)
只需将style='width:100%;'
(或您需要多少%)添加到输入
<div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>
答案 2 :(得分:0)
您是否尝试将输入宽度设置为100%? e.g。
input {width:100%;}