CODEWITHSUNDEEP
htmlcss
Vladimir Keleshev
Vladimir Keleshev

Reputation: 14245

What is the css-way to do this

What is the css-way to do this...

                text | input
           text text | input
                text | input input
      text text text | input

where text is some label for the input field input

UPD usually you can see such a layout in user registration forms

Upvotes: 0

Views: 82

Answers (5)

Graham
Graham

Reputation: 15204

See http://jsfiddle.net/fXeX2/

<html>
    <head>
        <title></title>
        <style type="text/css">

            label {
                display: inline;
                float: left;
                width: 10em;
                text-align: right;
            }

            input {
                margin-left: 15em;
                display: block;
            }

        </style>
    </head>
    <body>

        <fieldset>

            <label>text</label>
            <input type="text" style="width:10em;" />

            <label>text</label>
            <input type="text" style="width:10em;" />

            <label>text text</label>
            <input type="text" style="width:20em;" />

            <label>text text text</label>
            <input type="text" style="width:10em;" />

        </fieldset>

    </body>
</html>

Upvotes: 0

Hussein
Hussein

Reputation: 42808

input {
    border: 1px solid #ccc;
    background: #f5f5f5;
    padding-left:5px;
}
label {
    display: block;    
    width:auto;
    width: 100px;
    float: left;
    margin: 2px 6px 6px 4px;
    text-align: right;
    font-weight:bold;
    color:#555;
}
br{
    clear:both;
}

enter image description here

Check working example at http://jsfiddle.net/LW2Ss/3

Upvotes: 0

Albireo
Albireo

Reputation: 11085

Another way to do it.

HTML:

<div class='form'>
    <p><label>Test</label><input /></p>
    <p><label>Longer test</label><input /></p>
    <p><label>Even longer test</label><input /></p>
</div>

CSS:

.form p {
    clear: both;
    float: none;
}
.form p label {
    display: block;
    float: left;
    text-align: right;
    width: 10em;
}
.form p input {
    float: left;
}

Yelds: http://jsfiddle.net/QWH2J/

You can also use ul or ol with li.

Upvotes: 1

krtek
krtek

Reputation: 26597

Depends on the HTML code. You can play with float: left;, float; right and clear: both for example. But without at least some HTML code, it's impossible to give you a complete solution.

Here's a little example : http://jsfiddle.net/xm5aL/1/

HTML :

<div>
    <label for="input1">Input 1</label>
    <input name="input1" />
    <label for="input2">Some long Input 2</label>
    <input name="input2" />
    <label for="input3">Input 3</label>
    <input name="input3" />
    <label for="input4">short</label>
    <input name="input4" />
    <label for="input5">Input 5</label>
    <input name="input5" />
</div>

CSS :

div {
    width: 20em;
}

label {
    clear: both;
    float: left;
    text-align: right;
    width: 10em;
}

label:after {
    margin: 0em 1em;
    content: " | "
}

input {
    float: right;
    width: 10em;
}

Upvotes: 0

ithcy
ithcy

Reputation: 5589

CSS:

label {
    float: left;
    text-align: right;
    width: 100px;
    margin-right: 1em;
}

HTML:

<label for="i1">text</label><input id="i1" name="i1" /><br>
<label for="i2">text text</label><input id="i2" name="i2" /><br>
<label for="i3">text</label><input id="i3" name="i3" /> <input id="i5" name="i5" /><br>
<label for="i4">text text text</label><input id="i4" name="i4" /><br>

http://jsfiddle.net/wEcGf/

Upvotes: 4

Related Questions