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.

I might be understanding something wrong, but have you tried putting the <label> after the <input>? — scy
– scy, Commented Aug 11, 2010 at 23:26
Why don't you just put the label underneath it? And while you're at it, please accept some answers to your old questions. — Gert Grenander
– Gert Grenander, Commented Aug 11, 2010 at 23:27
is there a way to do without the <br /> basically to keep every input element on the same line, but the labels are right below each one. updated question with an ascii version of end result i am hoping to style — ina
– ina, Commented Aug 11, 2010 at 23:32
@You what's wrong with using "tag" loosely?!?! Do you use document.getElementsByTagName('...') — Alex
– Alex, Commented Aug 11, 2010 at 23:34

Ambo100 · Accepted Answer · 2017-12-28 23:58:07Z

27

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.

edited Dec 28, 2017 at 23:58

Ambo100

1,1913 gold badges15 silver badges30 bronze badges

answered Aug 11, 2010 at 23:47

You

24.1k3 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SIFE Over a year ago

@You Why did you add relative to input?

You Over a year ago

To position the input elements above their labels without chaning the HTML structure.

Barry Over a year ago

this is really cool. I had to use absolute positioning, due to having larger than normal inputs, however it works flawlessly. Quite impressive and very stange - There's "ghost" height regions around the label. I ended up making a visibility:hidden div containing a single input and single label with a <br> between. And when positioned absolutely, it flows just like a normal block element. Kudos.

scy · Accepted Answer · 2010-08-11 23:42:40Z

5

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;
}

edited Aug 11, 2010 at 23:42

answered Aug 11, 2010 at 23:36

scy

7,3192 gold badges30 silver badges36 bronze badges

1 Comment

ina Over a year ago

trying to avoid using the crutch of tables... tableless css and all, b ut not groking it. snippet for the float, please?

Thom Smith · Accepted Answer · 2010-08-11 23:37:57Z

3

You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.

answered Aug 11, 2010 at 23:37

Thom Smith

14.1k6 gold badges49 silver badges99 bronze badges

Comments

Razor Storm · Accepted Answer · 2010-08-12 00:04:30Z

1

You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.

The simplest way is to put the label beneath the input on the html:

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

Then you can wrap each input/label pair with a div, and set the div like so:

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

#sg1 div
{
    clear: both;
    float: left;
}

Next you can put

#sg1 label
{
    float: right;
}

input
{
    display:block;
}

edited Aug 12, 2010 at 0:04

answered Aug 11, 2010 at 23:37

Razor Storm

12.4k20 gold badges96 silver badges153 bronze badges

1 Comment

Razor Storm Over a year ago

jsfiddle.net/mT9SP/1 Look at it now: I added a display: block into the input

Collectives™ on Stack Overflow

CSS label text right below input element

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related