如何对齐输入并在一行中选择表单元素

input select 表单元素 my test case ,以便它们的水平边框对齐,并且所有文本(包括标签)都与基线对齐?

label 还有一个 输入 与其他元素一起构成元素 标签 以及 表单元素 一排 . 所以我想 边界 和 输入 与 . 有可能吗?

我无法在IE8或FF上取得胜利。我试过了 box-sizing: border-box; 输入 和 选择 盒子模型。

见 我的测试用例 ,其中包含以下代码:

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