web-dev-qa-db-fra.com

Aligner les entrées html sur la même ligne

Quelqu'un peut-il donner une solution simple quant à la façon d'aligner les entrées de formulaire sur la même ligne, par exemple, plusieurs fois lorsque je crée un formulaire, je peux les faire s'aligner les unes sur les autres et cela semble solide, mais si je mets deux entrées comme une zone de texte/texte à 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>
htmlcssinputalignment
27
Ryan Stortz

Avez-vous essayé de jouer avec la propriété CSS d'alignement vertical?

vertical-align:top;

De cette façon, tout sera cohérent et vous n'aurez pas à jouer avec des marges.

33
Rondel
textarea,input.button{display:inline-block;}

ou

textarea,input.button{float:left;}

faites votre choix en fonction de la façon dont votre défi vertical

8
paulcol.

Ajout d'un vertical-align semble travailler 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>
3
David

Vous pouvez généralement utiliser display:inline-block; ou float:left; Souhaitez-vous que les éléments soient affiché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.

2
Mike Sav

Juste donner float:left vers la zone de texte

http://jsfiddle.net/2qdJc/2/

1
Rohan Patil
<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

Bien sûr, cela fait tordre les puristes CSS, mais c'est certainement facile ...

0
ShaneBlake

Vous pouvez faire quelque chose comme ça (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/

0
TheOne LuKcian