Align input controls on page - html

Question

I have a form with 4 textboxes, a checkbox and a select with their labels on their left. Here's my code:
<fieldset class="form-field">
<legend>
<label class="form-field k-checkbox">Parent Material</label>
</legend>
<ul class="form-field">
<li>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" name="use_test_certificate" class="k-checkbox form-field" />
</li>
<li>
<label for="parent_material" class="form-field">Material</label>
<select name="parent_material" class="form-field"></select>
</li>
<li>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" name="proof_stress" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
<li>
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" name="do_weld_calculation" class="k-checkbox form-field" />
</li>
<li>
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" name="weld_redistribution_factor" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
</ul>
</fieldset>
Problem is that the select displays next to the checkbox and not next to it's label. And when I increase the window size it jumps up to next to my first textbox. How can I tell it to show next to it's label. I'm not a CSS expert. I normally can work things out for myself, but this one baffles me completely. Any help is appreciated.
Amanda

Answer 1

Seeing as you haven't shown your CSS, I might as well show you the ideal solution using nothing but form elements :)
Note how I have changed the name attributes to id. The id, which needs to be unique, is used to identify the corresponding label by means of the labels for attribute.
Have a look at this fiddle!
CSS
fieldset {
width: 500px;
}
label {
display: block;
float: left;
clear: left;
width: 200px;
margin: 10px;
}
input, select {
display: block;
float: left;
margin: 10px;
}
input[type=text] {
width: 170px;
}
HTML
<fieldset class="form-field">
<legend>Parent Material</legend>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" id="use_test_certificate" class="k-checkbox form-field" />
<label for="parent_material" class="form-field">Material</label>
<select id="parent_material" class="form-field"></select>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" id="proof_stress" maxlength="23" class="k-textbox form-field" />
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" id="do_weld_calculation" class="k-checkbox form-field" />
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" id="weld_redistribution_factor" maxlength="23" class="k-textbox form-field" />
</fieldset>