How to put web form elements on a new line?
#stylized input{
display: block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
This will put every input on a new line. - Removed "float: left", added "display: block".
My guess is user1359163's anwswer will help, though you might care to know why: using float
effectively removes the element out of the document's normal flow, a bit like changing the z-index
, allowing the element to flow over div borders, labels, spans and... 'ignore' clear
styles.
The element behaves as if it floats over the other elements, so in that respect, it stays clear of the left and right of all other elements that don't float.
I'm no CSS expert, but this way of looking at it has helped me a lot in solving issues with mangled layouts I've encountered when using the float
, clear
and z-index
styles.
I put them under list tags and it worked without changing styles and using a break tag is obsolete
<ul>
<li><input type = "text" name = "selection" value = "text1" /> Text1</li>
<li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>
Have you tried anything as simple as
<label>Name: </label><br>
<input type="text" name="name" id="name"/>
<label>Email: </label><br>
<input type="text" name="email" id="email"/>