Comment aligner les étiquettes de formulaire à côté des entrées ?

Alignement des étiquettes de formulaire à côté des entrées

Dans le domaine du développement Web, il est souvent souhaitable d'aligner les étiquettes de formulaire précisément à côté de leurs champs de saisie correspondants , garantissant une interface cohérente et conviviale. Cependant, réaliser cette tâche apparemment simple peut poser un défi.

Une approche de l'alignement des étiquettes consiste à définir une largeur fixe pour les éléments de l'étiquette afin de garantir leur taille cohérente dans toutes les entrées du formulaire. Cela peut être accompli en utilisant la propriété CSS width. De plus, la propriété d'affichage est définie sur inline-block pour permettre aux étiquettes de circuler horizontalement dans le conteneur de formulaire.

Pour améliorer encore l'alignement, la propriété text-align est utilisée pour aligner le texte dans les éléments d'étiquette pour la droite. Cela centre le texte horizontalement dans la largeur fixe, garantissant qu'il est parfaitement positionné à côté du champ de saisie.

Voici un exemple illustrant cette approche :

<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 implémentant ceci technique, les étiquettes de formulaire peuvent être alignées précisément à côté des champs de saisie, offrant ainsi une expérience utilisateur transparente et visuellement attrayante.

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!