输入文本框的宽度与父级相同 [英] input text box width same as parent

问题描述

我如何拥有一个继承其容器宽度的文本框?

How can I have a textbox that inherits the width of it's container?

例如，我有一个div，其中有一个文本框.

For example I have a div that has a textbox inside it.

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

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

What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.

使用上面的代码，每当我将浏览器调整为较小的宽度时，文本框始终会溢出其容器.

With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.

推荐答案

您应将box-sizing:border-box与width:100%一起使用. 这样，input将适合容器宽度的100％，但不会由于添加input的填充而使容器溢出:

You should use box-sizing:border-box together with width:100%. This way input will fit 100% of container's width but will not overflow it because of added input's padding:

#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/框大小/

More information about box-sizing CSS property with examples: http://css-tricks.com/box-sizing/

这篇关于输入文本框的宽度与父级相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！