Как выровнять ввод и выбрать элементы формы в одной строке

Question

Как можно выровнять элементы формы input и select в моем тестовом примере , чтобы их горизонтальные границы были выровнены, а весь текст, включая метки, выровнен по базовой линии?

Я хочу иметь элемент формы label и input вместе с другим элементом формы label и select в одной строке .Поэтому я хочу выровнять горизонтальные границы элементов select и input, а также выровнять весь текст, включая метки, по baseline .Возможно ли это?

Мне не удалось добиться этого на IE8 или FF на Win.Я попытался box-sizing: border-box; заставить input и select отрисовываться с использованием одной и той же блочной модели.

См. мой тестовый пример , который имеет этот код:

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

Answer 1

Я предлагаю добавить этот стиль к элементам select и input:

vertical-align: bottom;

Вы можете добавить заполнение к элементу select. Тем не менее, вы получите некоторое пространство вокруг стрелки раскрывающегося списка. 2px должно быть в порядке, но поиграйте с этим. Это должно помочь с базовыми текстами.

Answer 2

Похоже, что когда я не устанавливаю высоту элементов select и input, тогда установка border в 1px выравнивает ее.Я не изменяю значение по умолчанию vertical-align: baseline, чтобы текстовые базовые линии были выровнены.Я сделал это слишком сложно раньше.Этот короткий CSS сделал это:

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

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