Comment aligner les étiquettes à côté des entrées dans les formulaires ?

Alignement des étiquettes dans les formulaires

Dans la conception de formulaires, l'alignement des étiquettes à côté des entrées améliore la lisibilité et l'interaction de l'utilisateur. Vous trouverez ci-dessous les étapes pour réaliser cet alignement :

1. Déterminer la largeur fixe de l'étiquette :

Calculez une largeur fixe appropriée pour tous les éléments de l'étiquette, en tenant compte du texte de l'étiquette le plus long. Définissez cette largeur à l'aide de la propriété width de CSS.

2. Affichage en bloc en ligne :

Attribuer display : bloc en ligne aux éléments d'étiquetage. Cela permet de les aligner horizontalement tout en conservant leur largeur définie.

3. Alignement du texte à droite :

Assurez-vous d'un alignement correct du texte en définissant text-align: right pour les étiquettes. Cela aligne le texte de l'étiquette sur le bord droit de l'élément label.

Exemple de mise en œuvre :

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text" />
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text" />
</div>
<div class="block">
  <label>Short</label>
  <input type="text" />
</div></code>

En suivant ces étapes, les étiquettes des formulaires peuvent être correctement aligné à côté des champs de saisie, améliorant ainsi l'expérience utilisateur et la lisibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!