如何将输入框和下拉框表单元素对齐在同一行？

Question

如何在我的测试用例中使input和select表单元素对齐，使它们的水平边框对齐，并且所有文本（包括标签）都与基线对齐？

我想要在一行中放置一个label和一个input表单元素以及另一个label和一个select表单元素。因此，我希望select和input元素的水平边框对齐，并且我还希望将所有文本（包括标签）与基线对齐。这是否可能？

我在Win上的IE8或FF上无法实现它。我尝试使用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;
}

- Michal Čizmazia

Answer 1

我建议将这个样式添加到 select 和 input 元素中：

vertical-align: bottom;

你可以为 select 元素添加填充。但是，你会在下拉箭头周围得到一些空白间隙。 2px 应该可以，但需要根据实际情况进行调整。这应该有助于文本基线的对齐。

- esther h

---

感谢您的回复。这将水平边框对齐。但是，文本基线不在同一行上。 - Michal Čizmazia

@michal，你可以给选择元素添加内边距。不过，这样会在下拉箭头周围产生一些空白。2像素应该没问题，但你可以试着调整一下... - esther h

我编辑了我的回复，我认为行高不会给你带来任何额外的好处。祝你好运... - esther h

谢谢。我也不知道如何使所有文本（包括标签）对齐到基线。 - Michal Čizmazia

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

- Michal Čizmazia

---

我在“border:1px solid gray;”之前添加了“margin:0;”：因为我在每个控件的顶部都有标签，所以我更喜欢在每个标签下垂直保持相同的间距（选择框比输入框向下多一点，但不太明显）。 - Fil