Comment résoudre l'incohérence d'indentation du texte d'étiquette dans les formulaires avec des contraintes d'espace ?

Résolution des problèmes d'indentation du texte des étiquettes dans un formulaire contraint

Lorsque vous travaillez avec des formulaires dans des scénarios de largeur limitée, les étiquettes avec un texte long peuvent s'enrouler vers plusieurs lignes. Cependant, l'indentation sur la deuxième ligne peut être incompatible avec la première, ce qui entraîne une apparence désordonnée.

Pour remédier à cette disparité visuelle, CSS peut être utilisé pour obtenir une indentation uniforme sur toutes les lignes.

Solution :

L'extrait de code fourni offre une solution qui résout le problème d'indentation :

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

.checkbox-field label {
    margin-left: auto;
}</code>

<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 utilise la propriété flex-direction: row pour aligner l’élément label à côté de l’élément input. De plus, la propriété margin-left: auto ajuste automatiquement l'indentation de l'étiquette pour qu'elle corresponde à celle de l'entrée, quelle que soit la longueur du texte.

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!