Aligner les étiquettes dans le formulaire à côté de l’entrée

J’ai un scénario de forme très basique et connu où je dois aligner correctement les étiquettes à côté des entrées. Cependant, je ne sais pas comment le faire.

Mon objective serait que les étiquettes soient alignées à côté des entrées sur le côté droit. Voici un exemple de résultat souhaité.

entrer la description de l'image ici

J’ai fait un violon pour votre commodité et pour clarifier ce que j’ai maintenant – http://jsfiddle.net/WX58z/

Fragment:

Une solution possible:

  • Donnez l’ display: inline-block étiquettes display: inline-block ;
  • Donnez-leur une largeur fixe
  • Aligner le texte à droite

C’est:

 label { display: inline-block; width: 140px; text-align: right; }​ 
 

Répondu à une question comme celle-ci auparavant, vous pouvez consulter les résultats ici:

Créer une forme pour avoir des champs et du texte côte à côte – quelle est la manière sémantique de le faire?

Donc, pour appliquer les mêmes règles à votre violon, vous pouvez utiliser display:inline-block pour afficher vos libellés et vos groupes d’entrées côte à côte, comme ceci:

CSS

 input { margin-top: 5px; margin-bottom: 5px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ vertical-align:middle; margin-left:20px } label { display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ float: left; padding-top: 5px; text-align: right; width: 140px; } 

violon mis à jour

J’utilise quelque chose de similaire à ceci:

 

Style:

 .form-element label { display: inline-block; width: 150px; } 

Bien que les solutions proposées ici soient réalisables, une technologie plus récente a permis de trouver une solution plus efficace. CSS Grid Layout nous permet de structurer une solution plus élégante.

Le CSS ci-dessous fournit une structure de “parameters” à deux colonnes, où la première colonne doit être une étiquette alignée à droite, suivie d’un contenu dans la deuxième colonne. Un contenu plus compliqué peut être présenté dans la deuxième colonne en le plaçant dans un

.

[En guise de note: j’utilise CSS pour append le «:» qui suit chaque étiquette, car il s’agit d’un élément stylistique – ma préférence.]

 /* CSS */ div.settings { display:grid; grid-template-columns: max-content max-content; grid-gap:5px; } div.settings label { text-align:right; } div.settings label:after { content: ":"; } 
  
Display content

Vous pouvez également essayer d’utiliser Flex-Box