Aligner des spans horizontalement et verticalement

[_ash_]

Bonjour

Je souhaite réaliser en html quelque chose de la forme :

Code :

1
2
3
1er choix  : (menu déroulant)
2nd choix  : (menu déroulant)
3ème choix : (menu déroulant)

en faisant en sorte que, les ":" de chaque ligne soient alignés verticalement, mais je n'ai jusque là pas réussi à trouver de solution satisfaisante.

En particulier, voici l'approche que j'ai tenté :

Code html :

1
2
3
<div><span><span class="myclass">1er choix</span> : <select><option value="1">Choix 1</option></select></span></div>
<div><span><span class="myclass">2nd choix</span> : <select><option value="1">Choix 1</option></select></span></div>
<div><span><span class="myclass">3ème choix</span> : <select><option value="1">Choix 1</option></select></span></div>

en pensant pouvoir jouer sur le css pour faire en sorte que tous les .myclass aient la même largeur, cad avec le css :

Code css :

1
2
3
4
.myclass {
float:left;
width:200px;
}

Le "float" est là puisqu'il faut, pour pouvoir jouer ainsi sur la largeur d'un élément inline, le déclarer ainsi. Mais lorsque je fais ça, c'est le drame : ces spans ne sont plus alignés horizontalement avec le reste de la ligne (je suppose que c'est dû au fait que les selects de droite sont, par défaut, un brin plus haut que les spans, mais je n'arrive pas vraiment à corriger ça de manière correcte, et surtout, en m'assurant d'avoir une solution qui offre un rendu le plus indépendant possible du client).


Voyez vous quelle approche pourrait résoudre mes problématiques ?
Je vous remercie par avance pour vos réponses.