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.
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