What I usually do is :
<form>
<label for="param_1">Param 1</label>
<input id="param_1" name="param_1"><br />
<label for="param_2">Param 2</label>
<input id="param_2" name="param_2"><br />
</form>
and in a CSS :
label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }
Of course, you’ll have to define the width according to your actual data 🙂
- First, give label and input
display: block
, so that it can be assigned a size and be lined up. - They both get
float: left
because Explorer does things a bit differently - Format the label nicely
- hack the
br
so that there’s aclear: left
somewhere, and I remember that putting it on the label didn’t work on some browser.
Plus, with the br
you get a nice formatting even if the browser does not support CSS 🙂