输入文本框的动态宽度（HTML）

问题描述

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

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

> > ％。
这样 input 将适合容器宽度的100％，但不会因为添加 input 而溢出。 s $ pad $：

  #content input 
 {
 width：100％; 
 box-sizing：border-box; 
 -moz-box-sizing：border-box; 
} 
  

现场演示：

更多关于 box-sizing 带有示例的CSS属性：

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 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.

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

解决方案

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;
}

Live demo:http://jsfiddle.net/745Mt/1/

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

这篇关于输入文本框的动态宽度（HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！