Comment aligner une entrée et sélectionner des éléments de formulaire dans une rangée

Question

Comment aligner les éléments de formulaire input et select dans my test case, afin que leurs bordures horizontales soient alignées et que tout le texte, y compris les étiquettes, soit aligné sur la ligne de base?

Je veux avoir un label et un élément de forme input avec un autre label et un élément de forme selectdans une rangée. Par conséquent je veux avoir horizontal frontières de select et input éléments alignés, et je veux aussi avoir tout le texte, y compris les étiquettes aligné à la base de référence. C'est possible? Je n'ai pas réussi à le faire sur IE8 ou FF sur Win

J'ai essayé box-sizing: border-box; pour forcer input et select pour être rendu en utilisant le même modèle de boîte .

Voir my test case, qui a ce 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; 
} 

Answer 1

Il semble que lorsque je ne définis pas la hauteur de select et input éléments alors en réglant le border à 1px obtient aligné. Je ne modifie pas la valeur par défaut vertical-align: baseline pour conserver les lignes de base de texte alignées. Je l'ai fait trop compliqué avant. Ce petit CSS l'a fait:

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

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

Answer 2

Je suggère d'ajouter ce style aux select et input éléments:

vertical-align: bottom; 

Vous pouvez ajouter le remplissage à l'élément select. Cependant, vous obtiendrez des espaces autour de la flèche déroulante. 2px devrait bien se passer, mais jouez avec. Cela devrait aider avec les lignes de base de texte.