input text box width same as parent

Question

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.

        
                      

              相关标签:
       
      

Answer 1

Just add style='width:100%;' (or how much % do you need) to the Input

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

Answer 2

Have you tried setting the width of the input to 100%? e.g.

input {width:100%;}

Answer 3

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/