ansaurus

Question

CSS label text right below input element

Answer 1

+1 A:

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

Scytale 2010-08-11 23:36:10

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

ina 2010-08-11 23:38:02

Answer 2

A:

<style>

    input           { float:left; width:200px;  }
    label           { float:left; clear:left; width:200px; display:inline-block; text-align:right; }  /*use the width of the input[type=text]*/
</style>
<body>
    <form id="sg1" style="width:200px;">
        <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>
</body>

Alexander 2010-08-11 23:37:25

nope... take a look @ http://jsfiddle.net/6ugwq/

ina 2010-08-11 23:50:30

Answer 3

A:

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

Razor Storm 2010-08-11 23:37:48

http://jsfiddle.net/mT9SP/ that's close - but the label is too far right..

ina 2010-08-11 23:48:17

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

Razor Storm 2010-08-12 00:04:08

Answer 4

A:

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

Thom Smith 2010-08-11 23:37:57

Answer 5

+1 A:

A quickly whipped up example that works:

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

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

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.

You 2010-08-11 23:47:35

indeed! http://jsfiddle.net/LjS9H/

ina 2010-08-11 23:54:12

ansaurus

tags:

views:

answers:

CSS label text right below input element

related questions