CSS 如何在一行中对齐输入和选择表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4022458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align input and select form elements in one row
提问by Michal ?izmazia
How can I align the inputand selectform elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline?
如何对齐测试用例中的input和select表单元素，以便它们的水平边框对齐并且包括标签在内的所有文本都与基线对齐？
I want to have a labeland an inputform element along with another labeland a selectform element in one row. Therefore I want to have horizontalborders of selectand inputelements aligned, and I also want to have all text including labels
aligned to the baseline. Is it possible?
我想在一行中有一个label和一个input表单元素以及另一个label和一个select表单元素。因此，我想让和元素的水平边框对齐，并且我还想让包括标签在内的所有文本与基线对齐。是否可以？selectinput
I was unable to achieve it on IE8 or FF on Win. I tried box-sizing:
border-box;to force inputand selectto be rendered using the same
box model.
我无法在 Win 上的 IE8 或 FF 上实现它。我试图box-sizing:
border-box;强制input并select使用相同的盒子模型进行渲染。
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;
}
采纳答案by Michal ?izmazia
It seems that when I do not set the height of selectand inputelements then setting the borderto 1pxgets it aligned. I do not change the default vertical-align: baselineto keep the text baselinesaligned. I made it too complicated before. This short CSS did it:
似乎当我没有设置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; }
回答by esther h
I suggest adding this style to the selectand inputelements:
我建议将此样式添加到select和input元素：
vertical-align: bottom;
You can add padding to the selectelement. However, you will get some whitespace around the drop-down arrow. 2pxshould be okay, but play around with it. This should help with the text baselines.
您可以向select元素添加填充。但是，您会在下拉箭头周围看到一些空白。2px应该没问题，但可以玩玩它。这应该有助于文本基线。
