Alignement vertical avec la ligne de base et les zones de texte

Question

J'essaie d'obtenir une étiquette alignée avec la ligne de base de la première ligne de texte dans une zone de texte.

La tentative naïve:

<div style="vertical-align: baseline; display: inline-block"> 
    <label for="comments">Comments:</label> 
</div> 
<div style="vertical-align: baseline; display: inline-block"> 
    <textarea name="comments" id="comments"></textarea> 
</div> 

résultats dans l'étiquette étant aligné avec le fond de la zone de texte. Je préférerais l'avoir alignée avec la ligne première de la zone.

Merci.

Answer 1

Vous devez mettre le labeldiv à l'intérieur du même div que le textarea, alors, si vous le voulez réglé sur le haut de la textarea que vous cherchez vertical-align: top, pas baseline.

Voir et par exemple ici:
http://jsfiddle.net/anhus/

Answer 2

Le problème est que la zone de texte est considéré comme un bloc, comme une image. Lorsque vous effectuez un alignement vertical, il utilise la bordure pour déterminer le placement à la place du texte. Dans l'exemple ci-dessous, vous pouvez voir que l'étiquette et div sont positionnés en fonction du texte à l'intérieur, où la zone de texte se comporte comme l'image.

http://jsfiddle.net/kenearley/nGaQs/3/

Je pense que la seule façon d'obtenir l'étiquette et textarea pour aligner la façon dont vous voulez est de faire un alignement vertical: haut, puis faire rapport que votre taille de police et la hauteur de ligne match de haut droite.