Alignement de la ligne de base des étiquettes de zone avec la ligne de base du texte dans les entrées de texte

Question

J'affiche des entrées de texte en regard d'un texte d'étiquette dans un jeu de champs. Je voudrais que la ligne de base du texte dans les entrées de texte s'aligne avec la ligne de base du texte de l'étiquette. Je pourrais définir un facteur de fudge padding-top pour mes éléments .label, mais le contenu de mes éléments .value peut contenir du texte en lecture seule, ce qui fausserait l'alignement de ligne de base étiquette/valeur pour ces champs. Je soupçonne également que les différents facteurs de fudge seraient nécessaires pour différents navigateurs en raison des différences de hauteur entre les champs d'entrée à travers les navigateurs.

Est-ce que quelqu'un a des idées sur comment aligner mes lignes de base de texte d'étiquettes et de saisie? Le texte de mon libellé peut s'étendre sur plusieurs lignes et, par conséquent, j'aimerais que toute solution en tienne compte.

Vous pouvez voir un exemple en direct le code suivant à http://jsbin.com/enobe3.

CSS

* { 
    font-family: sans-serif; 
    font-size: 13px; 
} 

.field { 
    clear: left; 
    padding-top: 5px; 
} 

.label { 
    float: left; 
    width: 90px; 
} 

.value { 
    margin-left: 90px; 
    padding-left: 10px; 
} 

HTML

<fieldset> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value">Some text</div> 
    </div> 
    <div class="field"> 
     <div class="label">A short label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
    <div class="field"> 
     <div class="label">A long long long long long long long wrapping label</div> 
     <div class="value"><input value="Some text"/></div> 
    </div> 
</fieldset> 

Answer 1

Le problème d'alignement de base est liée à la hauteur de la ligne par défaut pour les zones de texte et champ de saisie.

input Les champs ont une hauteur par défaut plus grande pour s'adapter au remplissage, à la bordure et au texte.

J'ai expérimenté avec vos extraits de code HTML/CSS et affiché ma version à http://jsfiddle.net/audetwebdesign/EbuJH/

J'ai ajouté quelques couleurs d'arrière-plan, certains types de remplissage et les marges pour décrire les blocs.

La clé est de définir la propriété line-height afin que vos étiquettes et vos champs de saisie aient la même valeur, 2,0 dans mon exemple.

.field { 
    clear: left; 
    padding: 5px 0; 
    background-color: lightgray; 
    overflow: auto; 
    margin-bottom: 5px; 
    line-height: 2.00; /* Key property */ 
} 

Vous pouvez ajuster la hauteur de la ligne pour avoir une idée de son fonctionnement.

J'ai testé l'exemple dans Firefox et IE8 et les résultats sont cohérents avec un doctype strict.

Le résultat fonctionne bien pour les étiquettes à une ligne. Le seul inconvénient est que les étiquettes multi-lignes peuvent avoir plus d'espace que vous le souhaitez. Vous pouvez contourner ce problème en plaçant la première ligne de l'étiquette multiligne dans une plage et en appliquant la hauteur de ligne uniquement à la plage, mais cela représente un travail supplémentaire. Au moins, nous savons comprendre ce qui contrôle le positionnement de base, afin que nous puissions faire des progrès.