28173 sujets

CSS et mise en forme, CSS3

bonsoir

Je cherche à aligner les champs de formulaire... problème classique je sais, mais je n'ai pas encore trouvé de tutoriels satisfaisants...

Mon but est que tous les labels soient alignés à gauche, et tous les champs (input) soient un peu plus loin, alignés verticalement (ils sont tous de la même taille).

J'ai fait une dizaine de formulaires comme ça :
<form>
   <label for="input1">Input 1
       <input id="input1">
   </label>
   <label for="input2">Input 2
       <input id="input2">
   </label>
   <label for="input3">Input 3
       <input id="input3">
   </label>
</form>


Pour mette en forme ça, pour l'instant, j'ai fait ça :
label 
{
   display:block;
}

input
{
   float:right;
}


Mais voilà, le fait de faire flotter les input à droite me les aligne à droite, mais fait sauter une ligne (le haut du input est sur la ligne basse du label).

D'abord, est-ce que quelqu'un peut m'expliquer ce phénomène de saut de ligne ??

Je sais qu'il existerait la solution de rajouter <br/> après chaque label et du coup de définir une taille fixe pour mes labels, mais il me semble que c'est pas très propre, si ?
Et je voudrais éviter ça :
<form action="...">
  <p>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" />
  </p>
</form>

qui ne me semble pas très sémantique (pardon si c'est le cas, j'ai pas beaucoup de notion de ce côté là) et qui d'autre part me demanderais beaucoup de travail alors que je ne dispose que de peu de temps...

Voilà, si quelqu'un a une solution... merci


Bonne soirée/journée
Modifié par MademoiselleL (17 Apr 2007 - 20:42)
Je viens de trouver la solution de mon problème en répondant à Syl...

Ma feuille de style devient ça :

label
{
	position:relative;
	display:block;
	overflow:auto;
}
input
{
	position:absolute;
	top:0;
	right:15px;
}


Merci quand même.
J'espère que ça pourra servir à quelqu'un.