Display input label underneath input element

I've been trying to di开发者_开发知识库splay 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 !