Comment aligner d'entrée et de sélectionner les éléments de formulaire dans une rangée
Comment puis-je aligner les input
et select
éléments de formulaire dans mon cas de test, de sorte que leur horizontal frontières sont alignées et l'ensemble du texte, y compris les étiquettes est aligné sur la ligne de base?
Je veux avoir un label
et un input
élément de formulaire avec un autre label
et un select
élément de formulaire dans une ligne. Donc je veux avoir horizontale frontières de select
et input
éléments alignés, et je veux aussi avoir tout le texte, y compris les étiquettes
aligné à la de base. Est-il possible?
J'ai été incapable de le réaliser sur IE8 ou FF sur Win. J'ai essayé box-sizing:
à force
border-box;input
et select
être rendu à l'aide de la même
modèle de boîte.
Voir mon cas de test, 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;
}
OriginalL'auteur Michal Čizmazia | 2010-10-26
Vous devez vous connecter pour publier un commentaire.
Je suggère l'ajout de ce style à la
select
etinput
éléments:Vous pouvez ajouter un rembourrage pour le
select
élément. Toutefois, vous obtiendrez des espaces autour de la flèche de la liste déroulante.2px
devrait être d'accord, mais jouer avec elle. Cela devrait aider avec les lignes de base du texte.vous pouvez ajouter un rembourrage pour le sélectionner l'élément. toutefois, vous obtiendrez des espaces autour de la flèche de la liste déroulante. 2px devrait être ok, mais jouer avec elle...
j'ai édité ma réponse, je ne pense pas que la hauteur de la ligne ne vous donne aucun avantage supplémentaire. bonne chance...
Merci. Je ne sais pas comment faire de l'ensemble du texte, y compris les étiquettes alignées sur la ligne de base.
OriginalL'auteur esther h
Il semble que, lorsque je n'ai pas régler la hauteur de
select
etinput
éléments, puis en réglant lesborder
à1px
il obtient alignés. Je ne modifiez pas la valeur par défautvertical-align: baseline
de garder le lignes de base du texte alignés. Je l'ai fait trop compliqué avant. Ce court CSS n':OriginalL'auteur Michal Čizmazia