Comment aligner correctement les étiquettes à côté des entrées dans un formulaire ?

Aligner correctement les étiquettes à côté des entrées dans un formulaire

Un scénario courant dans la conception de formulaire consiste à aligner correctement les étiquettes à côté de leurs champs de saisie. Pour réaliser cet alignement, envisagez l'approche suivante :

Déterminez une largeur fixe appropriée pour les éléments d'étiquette et attribuez-la à l'aide de la propriété width. Définissez la propriété display sur inline-block pour les étiquettes. Alignez le texte dans les étiquettes vers la droite à l'aide de text-align: right.

Voici un exemple d'extrait de code :

<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 approche utilise des largeurs fixes, ce qui n'est peut-être pas idéal. pour des conceptions réactives. Pensez à utiliser flexbox ou CSS Grid pour une solution plus réactive.

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!