输入文本框的动态宽度（HTML） [英] Dynamic width for input text box (HTML)

问题描述

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

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

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

我想要做的是当我调整浏览器的大小时，文本框必须遵循宽度

使用上面的代码，只要我将浏览器调整为更小的宽度，文本框就会溢出它的容器。

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

  #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/

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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！