[clos] Eléments de formulaire et vertical-align

Bonjour,

Les éléments "Select" et "Input" sont des éléments en ligne. Théoriquement, on peut donc leur appliquer :

vertical-align:middle;

Ce que j'ai fait pour aligner deux éléments verticalement.
ce qui donne : (code HTML1) :



Le problème est que lorsque j'ajoute plusieurs "<option>" au "Select" ça décale tout (code HTML2)...



le code :

CSS
-----
 form div{width:355px;height:40px;margin:3px 0 0 8px;background:url(images/bg.png) no-repeat 0 0;}
  select{vertical-align:middle;margin:8px 0 0 45px;}
  input{vertical-align:middle;margin:8px 0 0 165px;}

HTML 1
--------
<form>
  <div>
    <select name="select">
      <option value="0">choix</option>
    </select>
    <input src="images/valid.png" type ="image">
  </div>
</form>

HTML 2
--------
<form>
  <div>
    <select name="select">
      <option value="0">choix</option>
      <option value="1">choix1</option>
      <option value="2">choix2</option>
      <option value="3">choix3</option>
      <option value="4">choix4</option>
      <option value="5">choix5</option>
      <option value="6">choix6</option>
      <option value="7">choix7</option>
      <option value="8">choix8</option> 
    </select>
    <input src="images/valid.png" type ="image">
  </div>
</form>

Y a-t-il une solution pour résoudre ce problème ?
Modifié par EricLB (11 Aug 2006 - 10:05)

Est-ce que c'est bien de mettre une grande marge fix pour décaler un élément à sa droite ? l'utilisation d'un float droit ne serait-il pas mieux ?

Oui tout est toujours possible ! comme de mettre les éléments en absolute aussi. Mais dans le cas présent, j'aimerais comprendre pourquoi il ne m'est pas possible d'aligner des éléments "en-ligne". Je n'ai jamais recontré ce cas, donc je suis très curieux de savoir s'il existe une solution autre que positionner les éléments en float ou en absolute.