Question

如何在my test case中对齐input和select表单元素，以便它们的水平边框对齐，包含标签的所有文本都与基线对齐？

我希望在一行中有一个label和一个input表单元素以及另一个label和一个select表单元素。因此，我希望select和input元素的水平边框对齐，我还希望包含标签的所有文字与基线对齐。有可能吗？

我无法在Win8上的IE8或FF上实现它。我尝试box-sizing: border-box;强制使用相同的input和select进行渲染盒子模型。

请参阅my test case，其中包含以下代码：

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

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

2 个答案: