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

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!