Comment indenter les lignes d'étiquette enveloppées suivantes en 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 :

Insérez à 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".

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>

Exemple d'utilisation :

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

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

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!