"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment indenter les lignes d'étiquette enveloppées suivantes en CSS ?

Comment indenter les lignes d'étiquette enveloppées suivantes en CSS ?

Publié le 2024-11-08
Parcourir:162

How to Indent Subsequent Wrapped Label Lines in CSS?

Mise en retrait des lignes suivantes du texte d'étiquette enveloppé

Lorsque vous êtes confronté à des contraintes de largeur de formulaire, le texte d'étiquette peut s'enrouler sur plusieurs lignes, ce qui conduit à une esthétique préoccupations. Bien que la première ligne soit en retrait en raison de la présence d'un élément d'entrée, les lignes suivantes peuvent ne pas l'être, créant une apparence inégale.

Pour obtenir une deuxième ligne en retrait et les lignes suivantes en utilisant uniquement CSS, envisagez d'utiliser l'approche suivante :

Entourez à la fois l'élément d'entrée et son étiquette dans un conteneur parent avec la classe "checkbox-field". Définissez la propriété d'affichage de ce parent sur "flex" et la direction flex sur "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

Exemple d'utilisation :

Cette solution ajuste de manière flexible le texte de l'étiquette à la largeur disponible tout en conservant une apparence visuelle cohérente.

Déclaration de sortie Cet article est réimprimé à l'adresse : 1729725831. En cas d'infraction, veuillez contacter [email protected] pour le supprimer.
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3