Maison  >  Article  >  interface Web  >  Comment mettre en retrait le texte d'une étiquette sur plusieurs lignes sur des formulaires de largeur limitée ?

Comment mettre en retrait le texte d'une étiquette sur plusieurs lignes sur des formulaires de largeur limitée ?

DDD
DDDoriginal
2024-10-24 07:21:02454parcourir

How to Indent Multiple-Line Label Text on Forms with Limited Width?

Retirer le texte de l'étiquette sur plusieurs lignes pour les formulaires à largeur limitée

Dans un formulaire de largeur limitée, alors que le texte de l'étiquette plus long peut s'enrouler sur plusieurs lignes, seule la première ligne est souvent en retrait en raison de l'élément d'entrée associé. Cela peut entraîner une apparence désorganisée.

Pour résoudre ce problème et indenter toutes les lignes de manière cohérente, vous pouvez utiliser CSS :



.checkbox-field {</p>
<pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

}

<div class="checkbox-field"></p>
<pre class="brush:php;toolbar:false"><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>



Le code CSS :

  • Applique une boîte flexible à l'élément conteneur .checkbox-field.
  • Définit la direction de flexion sur la ligne, en alignant les éléments horizontalement.

Le code HTML :

  • Crée un élément conteneur pour contenir les éléments input et label.
  • Utilise display: flex sur le conteneur pour activer flexbox layout.
  • Aligne l'entrée et l'étiquette horizontalement à l'aide de flex-direction: row.

Avec ces ajustements, le texte de l'étiquette sera renvoyé à la ligne et mis en retrait de manière cohérente, ce qui donnera un formulaire visuellement organisé.

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