Input Input HTML Input at 100% Width

Question

This is a problem that I always run into.

The following HTML:

<form id="sy_login"> <ul class="form_column"> <li> <input id="sy_login_username" name="sy_login_username" placeholder="Username"></input> </li> <li> <input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"></input> </li> </ul> </form> 

The following CSS follows:

 @CHARSET "ISO-8859-1"; body { background: #DDDDDD; padding:0px; margin:0px; } input[placeholder], [placeholder], *[placeholder] { font-style:italic; } .form_column { list-style-type: none; padding: 0px; margin: 10px 10px 10px 10px; width:100%; } .form_column input, .form_column textarea, .form_column select { width: 100%; } 

It produces the following result:

This is a firebug check of one of the input fields.

From what I can tell, ul cuts off the parent form due to the field.

I need ul consist of margin, having a width of 100%, and for inputs should also be 100% wide.

Update:

I tried to replace the stock in words, as this would have the same intended desired effect, but it looked exactly the same. I really want to avoid the case of using static widths on the inputs themselves.

Another remark that may be useful for the answer is that this is only necessary for working in HTML5, a solution by cross standards would be good, but technically not necessary.

After removing the width: 100%

Now he looks much better. However, I highlighted the input problem, for the input it will be necessary to fill in the text, but the width of ul must be dynamic in the parent form, in itself it must have dynamic width for the window.

Answer 1

Remove the border with UL. Give the add-on FORM. (which gives an automatic field for ul).

Also remember: if you set the width to 100% for any element, then it will take the full width of its parent element, now adding some field or padding to this element exceeds the full width of the parent element and may violate the user interface.

ie Margin (= 10px) + Width (= 100%)> The width of the parent element.

Follow this link to get an idea of ​​the css box model.

http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

thanks.

Answer 2

Let's see another full version: the red frame belongs to the form, the blue frame belongs to UL. Delete it if you want.

 body { background: #DDDDDD; padding:0px; margin:0px; } input[placeholder], [placeholder], *[placeholder] { font-style:italic; } #sy_login{ border:solid 1px red; } .form_column { border:solid 1px blue; margin: 0px; padding:5px; } .form_column ul,li{ list-style-type: none; margin:0px; padding:0px; width:auto; } .form_column input, .form_column textarea, .form_column select { width:100%; } 

Answer 3

Try commenting on width:100% on form_column

 .form_column { list-style-type: none; padding: 0px; margin: 10px 10px 10px 10px; 'width:100%; } 

Contact LIVE DEMO

Answer 4

 .form_column { list-style-type: none; padding: 0px; margin:10px; } 

Answer 5

Try something like this:

 .form_column { list-style-type: none; padding: 10px; margin: 0; width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }