I've been trying to display a label underneath an input element like this form: http://www.appnitro.com/demo/view.php?id=7
I have been able to get the labels underneath, but using my current method I cant have multiple inputs on the same line like the form I linked to.
What is the best and cleanest way to do this?
Here's my current code: http://jsfiddle.net/6znGU/
You can see it by looking at the source of the example you gave. Put each input with its label into a span that has float: left set.
See here: http://jsfiddle.net/Ab9hv/
And by the way, you can put the input inside the label, then you don't need the for attribute.
<span style="float: left;">
<label><input type="text" name="fn"/>First</label>
</span>
<span style="float: left;">
<label><input type="text" name="ln"/>Last</label>
</span>
New code: http://jsfiddle.net/QwDmr/
Try adding some divs. One div to make the row of inputs and labels, and a div for each pair inside the row so they can float without clearing the objects to the left and right of them. Using margin to space them.
<div class="rowOfFields">
<div style="float:left">
<input type="text" name="fn" id="" />
<label for="fn">First</label>
</div>
<div style="float:left">
<input type="text" name="ln" id="" />
<label for="ln">Last</label>
</div>
</div>
You had the solution in that example you gave. You need to wrap your label input combos into a div element and either left float them or make them in-line elements.
See it on JSFiddle.
Hope this helps !
