CSS label text right below input element

Question

I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:

<form id="sg1">
    <label for="member1">member 1</label>
    <input name="member1" id="member1" value="jack" />
    <label for="member2">member 2</label>
    <input name="member2" id="member2" value="carter" />
    <label for="member3">member 3</label>
    <input name="member3" id="member3" value="jackson" />
    <label for="member4">member 4</label>
    <input name="member4" id="member4" value="tielk" />    
</form>​

Trying to get:

[input box 1]    [input box 2]
      label 1          label 2

etc, with all elements.

Answer 1

A quickly whipped up example that works:

input {
  display: inline-block;
  width: 6em;
  position: relative;
  top: -3em;
}

label {
  display: inline-block;
  width: 6em;
  margin-right: .5em;
  padding-top: 1.5em;
}

<form id="sg1">
  <label>member 1 <input name="member1" id="member1" value="jack" /></label>
  <label>member 2 <input name="member2" id="member2" value="carter" /></label>
  <label>member 3 <input name="member3" id="member3" value="jackson" /></label>
  <label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>​

Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.

Answer 2

Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:

<div class="pair">
    <input type="text" name="foo" value="bar" /><br />
    <label for="foo">shabba</label>
</div>
<div class="pair">
    …
</div>

CSS:

div.pair {
    float:left;
}