Alignement différent sur une même ligne

Salut à tous !

Voici ma question: j'ai un formulaire, avec des champs (normal ). Pour chaque champ, un titre. Exemple:

Mon champ: xxxxxxxxxxxxxxxxx

Je voudrais savoir, pour un même <div> s'il est possible d'aligner le nom du champ (Mon champ) sur la gauche, et le champ (xxxxxxxxxxx) sur la droite, pour donner un truc comme ça:

Mon champ: XXXXXXXXXXXX
Mon champ 2: XXXXXXXXXXXX

(ici pas super aligné)

Merci ;)

On peut imaginer une source HTML comme suis :

<p>
  <label for="bidule">Le texte :</label>
  <input type="text" id="bidule" name="machin" value="truc" />
</p>

Tu peux utiliser le floating pour "aligner" de part et d'autre le label et l'input :

label{
  display:block;
  width: 30%;
  float:left;
  text-align:right;
}
input{
  display:block;
  width:55%;
  float:right;
}
p {
  clear:both;
}

Joli !

Je ne connaissais pas du tout cette balise (label)

Va falloir que je me renseigne

Merci bcp pour ton aide !

Jep a écrit :

Tu peux utiliser le floating pour "aligner" de part et d'autre le label et l'input :

p {
  clear:both;
}

Le clear:both sur le <p> conteneur des flottants ne sert à rien et ne produira pas le résultat attendu.

Clear s'applique au bloc qui suit immédiatement les flottants, et l'empêche de venir se placer "à côté" de ceux-ci.

Il faut donc l'appliquer ici à un autre élément du formulaire qui se trouverait après le <label> et l'<input>. Généralement, le bouton de soumission du formulaire s'y prête bien.

Oui, tu as tout a fait raison Laurent... j'ai repris ce code d'un de mes site et j'applique le clear:both a la balise P car j'ai ai plusieur qui ce suivent les une après les autres