CODEWITHSUNDEEP
cssalignment
Michal Cizmazia
Michal Cizmazia

Reputation: 883

How to align input and select form elements in one row

How can I align the input and select form elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline?

I want to have a label and an input form element along with another label and a select form element in one row. Therefore I want to have horizontal borders of select and input elements aligned, and I also want to have all text including labels aligned to the baseline. Is it possible?

I was unable to achieve it on IE8 or FF on Win. I tried box-sizing: border-box; to force input and select to be rendered using the same box model.

See my test case, which has this code:

<form action="Submit" method="post">
    <p>
        <label>Sex<select><option value="" selected="selected">Sex</option></select></label>
        <label>Date of Birth<input type="text" value="Date of Birth" /></label>
    </p>
</form>

body, input, select {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
}

select, input {
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid gray;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

label {
    padding: 0;
    margin: 0;
}

Upvotes: 4

Views: 25948

Answers (2)

esther h
esther h

Reputation: 1468

I suggest adding this style to the select and input elements:

vertical-align: bottom;

You can add padding to the select element. However, you will get some whitespace around the drop-down arrow. 2px should be okay, but play around with it. This should help with the text baselines.

Upvotes: 12

Michal Cizmazia
Michal Cizmazia

Reputation: 883

It seems that when I do not set the height of select and input elements then setting the border to 1px gets it aligned. I do not change the default vertical-align: baseline to keep the text baselines aligned. I made it too complicated before. This short CSS did it:

body, input, select {
  font-family:Helvetica,Arial,sans-serif;
  font-size: 12px;
}

select, input { border: 1px solid gray; }

Upvotes: 1

Related Questions