如何在一行中對齊輸入和選擇表單元素

Question

如何對齊my test case中的input和select表單元素，以使其水平邊框對齊，並且包括標籤的所有文本都與基線對齊？

我想與另一個label沿label和input表單元素和一排select表單元素。所以我想水平select和input元素的邊界對齊，我也想要所有的文本包括標籤 對齊基線。可能嗎？

我在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元素，那麼將border設置爲1px會使其對齊。我不更改默認vertical-align: baseline以保持文本基線的對齊。之前我做得太複雜了。這個簡短的CSS做到了：

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

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

Answer 2

我建議增加這種風格的select和input元素：

vertical-align: bottom; 

您可以添加填充到select元素。但是，您將在下拉箭頭周圍留出一些空白。 2px應該沒關係，但是請充分利用它。這應該有助於文本基線。