Maison >interface Web >tutoriel CSS >Comment mettre en retrait le texte d'une étiquette enveloppée en CSS pour les formulaires de largeur limitée ?

Comment mettre en retrait le texte d'une étiquette enveloppée en CSS pour les formulaires de largeur limitée ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-24 07:25:30401parcourir

How to Indent Wrapped Label Text in CSS for Forms with Limited Width?

CSS pour l'indentation du texte d'étiquette enveloppé

Lors de la conception de formulaires avec une largeur limitée, il est courant de rencontrer des étiquettes qui dépassent la largeur du formulaire, ce qui entraîne l'apparition de texte emballage. Cependant, le problème survient lorsque la deuxième ligne de texte enveloppé n'a pas d'indentation appropriée par rapport à la première ligne.

Pour résoudre ce problème, CSS propose une solution simple. En définissant la propriété d'affichage du conteneur d'étiquettes sur "flex" avec "flex-direction: row", nous alignons l'étiquette et son élément d'entrée correspondant sur la même ligne. Cela garantit que toutes les lignes de texte enveloppé reçoivent la même indentation.

Voici un exemple :

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>
<code class="html"><div class="checkbox-field">
  <input type="checkbox" id="check">
  <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div></code>

En utilisant cette technique CSS, vous pouvez facilement appliquer l'indentation sur toutes les lignes de texte d'étiquette enveloppé, améliorant l'attrait visuel de vos 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!

Déclaration:
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