Alignement des entrées html sur la même ligne
Quelqu'un peut-il donner une solution simple pour aligner les entrées de formulaire sur la même ligne, par exemple, plusieurs fois lorsque je construis un formulaire, je peux les aligner les uns sur les autres et cela semble sonore, mais si je mets deux entrées comme un textarea/text à côté d'un autre texte ou d'un bouton, j'obtiens des différences d'alignement vertical. Existe-t-il un moyen de résoudre ce problème sans jouer avec les marges et le rembourrage?
Ex:
<style type='text/css'>
form{
display:inline;
}
textarea{
font-size:25px;
height:25px;
width:200px;
}
input.button{
height:25px;
width:50px;
}
</style>
<form>
<textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>
7 réponses
Avez-vous essayé de jouer avec la propriété CSS vertical-align?
vertical-align:top;
De Cette façon, tout sera cohérent et vous n'aurez pas à jouer avec les marges.
textarea,input.button{display:inline-block;}
Ou
textarea,input.button{float:left;}
Faites votre choix en fonction de votre défi vertical
Ajout d'un vertical-align semble travail pour moi:
<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>
Vous pouvez généralement utiliser display:inline-block; ou {[1] } voulez-vous que les éléments soient alignés en haut ou en bas?
Dans votre exemple, vous n'avez pas fermé le type d'entrée, il devrait être type='button' - il vous manque un apos.
<table>
<tr>
<td><input /></td>
<td><input /></td>
</tr>
</table>
Bien sûr, cela fait se tortiller les puristes CSS, mais c'est certainement facile...
Vous pouvez faire quelque chose comme ceci (travaillé dans mon cas):
<div style="width:150px"><p>Start: <input type="text" id="your_id"></p>
</div>
<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>
Voici une démo: http://jsfiddle.net/gn3qx6w6/1/