Comment aligner les étiquettes de saisie de formulaire à droite ?

Alignement des étiquettes de saisie de formulaire

Le but de cet article est de fournir une solution pour aligner les étiquettes de formulaire sur le côté droit à côté de leur correspondant. inputs.

Une solution possible consiste à définir une largeur fixe pour les éléments d'étiquette à l'aide de la propriété width et à activer l'affichage des blocs en ligne avec display: inline-block. De plus, aligner le texte vers la droite à l'aide de text-align: right garantit que les étiquettes sont positionnées avec précision.

Voici un extrait de code illustrant cette solution :

<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>

Cette méthode fournit un moyen simple d'aligner les étiquettes de manière cohérente à côté des entrées, améliorant ainsi l'expérience utilisateur et la lisibilité des formulaires.

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!