Many-Input Form Alignment
by Preston Badeer
HTML
<fieldset>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<input type="text" />
<label>label asdf asdf asdf asdf asdf</label>
</div>
<div>
<input type="text" />
<label>label asdfasdf</label>
</div>
<div>
<input type="text" />
<label>label asdfadsfsdaffaasdfasdfds</label>
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
</fieldset>
<fieldset>
<div>
<label>label2</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
</fieldset>
<fieldset>
<div>
<label>label3</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
</fieldset>
<fieldset>
<div>
<label>label4</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
<label>label</label>
<input type="text" />
</div>
<div>
...
CSS
input {
width: 60%;
float: right;
}
label {
width: 35%;
word-wrap: break-word;
word-break: break-all;
text-align: right;
}
label, input, div, fieldset {
display: inline-block;
}
fieldset {
width: 45%;
vertical-align: top;
}
div {
width: 100%;
}