Maison > interface Web > tutoriel CSS > Comment aligner correctement les étiquettes à côté des entrées dans un formulaire ?

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

Susan Sarandon
Libérer: 2024-11-05 03:32:02
original
1035 Les gens l'ont consulté

How to Align Labels Next to Inputs Correctly in a Form?

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>
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal