Align select and input

Question

Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture. Live example: http://jsfiddle.net/N4hpQ/ Thank you.

<html>
<head>
<style>

fieldset {
display: inline-block;
}

fieldset input,
fieldset select{
float: right;
margin-left: 5px;   
}

fieldset p {
text-align: right;
}

</style>
</head>
<body>

<fieldset>          
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset> 

</body>
</html>

I believe this is one of the very, very seldom cases I would choose a `` if no `width` is allowed. At least it is semantically more correct than `
`. Note that you're currently missing the `for=` attribute in your HTML. You can either include the right ``/` — Zeta, Dec 06 '12 at 19:20
No width at all? I can't think of a way, except by using a table as Zeta mentioned. If with width, you could float the label and input/select to the left, and then apply "display: inline-block; text-align: right; width: 175px;" (or whatever width you need) to the label elements. — CM Kanode, Dec 06 '12 at 19:26
I give up here: http://jsfiddle.net/oceog/N4hpQ/10/, not sure if it works at any browser different from chrome — zb', Dec 06 '12 at 19:35
No width at all, the text of LABEL is variable by coding. The capture is only an example. — FeKuLa, Dec 06 '12 at 19:37
@FeKuLa as i said i giveup here, because i don't found a way to do that usable. — zb', Dec 06 '12 at 23:58

3dgoo · Accepted Answer · 2012-12-06T23:19:27.470

You could use css display: table; to achieve this.

HTML

<fieldset>
    <p>
        <label>First Name: </label>
        <input type="text" />
    </p>
    <p>
        <label>Second Name: </label>
        <input type="text" />
    </p>
    <p>
        <label>Country: </label>
        <select>
            <option>Choose</option>
        </select>
    </p>
    <p>
        <label>Age: </label>
        <select>
            <option>Choose</option>
        </select>
    </p>
</fieldset>

CSS

fieldset {
    display: table;
}
fieldset p {
    display: table-row;
}
fieldset input, 
fieldset select, 
fieldset label {
    display: table-cell;
    margin: 3px;
}
fieldset label {
    text-align: right;
}

Demo

Teemu · Answer 2 · 2012-12-06T20:38:53.633

2

Without TABLE or width.

CSS:

FIELDSET {
    display: inline-block;
    line-height: 200%;
}
.labels {
    text-align: right;
    float: left;
    margin-right: 5px;
}
.inputs {
    float: left;
}

And HTML:

<fieldset>          
    <div class="labels">
        <label>First Name: </label><br />
        <label>Second Name: </label><br />
        <label>Country: </label><br />
        <label>Age: </label>
    </div>
    <div class="inputs">
        <input type="text" /><br />
        <input type="text" /><br />
        <select><option>Choose</option></select><br />
        <select><option>Choose</option></select>
    </div>
</fieldset>

And the fiddle

EDIT

It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.

edited Dec 06 '12 at 20:38

answered Dec 06 '12 at 19:55

Teemu

22,918
7
53
106

Using my HTML:
TEXT
is not possible? – FeKuLa Dec 06 '12 at 20:19
@FeKuLa I think you can use the CSS from eicto's fiddle. It uses relative unit (`%`) for width, hence it has only influence inside of the `fieldset`, and you can use any label text you want. – Teemu Dec 06 '12 at 20:36

Ryan · Answer 3 · 2012-12-06T21:14:37.083

0

Possible? Yes, here's a quick hack to do it even:

float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.

so would look like this:

p label{
    float:left;
}
p input{
    float:right;
    margin-right: /*whatever value you need this to be to look good*/;
}

here is the jsfiddle.

edited Dec 06 '12 at 21:14

answered Dec 06 '12 at 19:46

Ryan

5,644
3
38
66

Maybe it's a problem with Chrome on the Mac, but that fiddle isn't lined up very nicely when I view it. You might wanna double-check it. – Marvo Dec 06 '12 at 20:01
I think you need to rethink your code, `p` elements can't be splitted into two separate parts just with some CSS. The fiddle looks messy in Win7 and FF too. – Teemu Dec 06 '12 at 20:19
Yes, there is a problem in the JSFiddle example. – FeKuLa Dec 06 '12 at 20:37
updated jsfiddle, @Marvo and Teemu and Fekula, I am on Linux, so I can't test in IE, but I looked at it in chrome and FF. – Ryan Dec 06 '12 at 21:16
Hard to explain in a comment, but in Mac/Chrome, the LastName field is horizontal with the Country: label, and the LastName: label is oddly indented. =/ – Marvo Dec 07 '12 at 00:42

Align select and input

3 Answers3