How can I align the left edge of HTML form elements with CSS?

Question

I want to do the following:

aa: ________ bbbb: ________ ccc: ________ 

So I wrote:

 <span>aa:</span><input type="text" /><br/> <span>bbbb:</span><input type="text" /><br/> <span>cc:</span><input type="text" /> 

And I get:

 aa:________ bbbb:________ ccc:________ 

I know that I can easily with a table. How to do this without tables with as little css as possible.

Thanks.

Answer 1

 <style> label { float: left; clear: left; width: 3em; padding-right: .5em; } </style> <label for="a">aa:</label> <input id="a" type="text" /><br/> <label for="b">bbbb:</label> <input id="b" type="text" /><br/> <label for="c">ccc:</label> <input id="c" type="text" /> 

Answer 2

One option is to put the span left and input to the right, and then wrap it in a div :

 <style type="text/css"> span.left { float: left; clear: left; } input.right { float: right; clear: right; } div.container { width: 333px; } </style> <div class="container"> <div><span class="left">aa:</span><input type="text" class="right" /></div> <div><span class="left">bbbb:</span><input type="text" class="right" /></div> <div><span class="left">ccc:</span><input type="text" class="right" /></div> </div> 

Answer 3

replace each <span> with <span class='fixedwidth'> and use this css rule:

 .fixedwidth, input{ display:block; float:left; clear:left; width:100px; } 

Answer 4

Try this (tested in FF):

CSS

 .label { width: 75px; /*Or any width you want*/ display: inline-block; } 

HTML:

 <span class="label">aa:</span><input type="text" /><br/> <span class="label">bbbb:</span><input type="text" /><br/> <span class="label">cc:</span><input type="text" /> 

Answer 5

Use multiple div sets with floating and clean attributes.