Html 输入文本框宽度与父级相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20092074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input text box width same as parent
提问by rhy
How can I have a textbox that inherits the width of it's container?
我怎样才能拥有一个继承其容器宽度的文本框？
For example I have a div that has a textbox inside it.
例如，我有一个 div，里面有一个文本框。
<div id='content' style='width:100%;'>
<input type='text' name='txtUsername'>
</div>
What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.
我想要做的是当我调整浏览器的大小时，文本框必须遵循其父 div 的宽度。
With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.
使用上面的代码，每当我将浏览器调整为较小的宽度时，文本框总是会溢出它的容器。
回答by keaukraine
You should use box-sizing:border-boxtogether with width:100%.
This way inputwill fit 100% of container's width but will not overflow it because of added input's padding:
您应该box-sizing:border-box与width:100%. 这种方式input将适合 100% 的容器宽度，但不会因为添加input的填充而溢出：
#content input
{
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Live demo: http://jsfiddle.net/745Mt/1/
现场演示：http: //jsfiddle.net/745Mt/1/
More information about box-sizingCSS property with examples: http://css-tricks.com/box-sizing/
有关box-sizing示例的 CSS 属性的更多信息：http: //css-tricks.com/box-sizing/
回答by Maksym Stepanenko
Just add style='width:100%;'(or how much % do you need) to the Input
只需添加 style='width:100%;'（或您需要多少 %）到输入
<div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>
回答by AGB
Have you tried setting the width of the input to 100%? e.g.
您是否尝试将输入的宽度设置为 100%？例如
input {width:100%;}
