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

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!