Allineamento verticale con linea di base e aree di testo

Question

Sto cercando di ottenere un'etichetta allineata con la linea di base della prima riga di testo in un'area di testo.

Il tentativo naif:

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

risultati in etichetta essendo allineati con la parte inferiore dell'area di testo. Preferirei farlo allineare con la linea prima dell'area.

Grazie.

Answer 1

è necessario mettere il labeldiv all'interno dello stesso div come il textarea, allora, se si vuole che impostato sulla parte superiore del textarea che stai cercando vertical-align: top, non baseline.

View e l'esempio qui:
http://jsfiddle.net/anhus/

Answer 2

Il problema è che l'area di testo è visto come un blocco, come un'immagine. Quando si esegue un allineamento verticale, viene utilizzato il bordo per determinare il posizionamento anziché il testo. Nell'esempio seguente, puoi vedere che l'etichetta e il div sono posizionati in base al testo all'interno, dove la textarea si comporta come l'immagine.

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

Credo che l'unico modo per ottenere l'etichetta e textarea per allineare il modo desiderato è quello di fare un vertical-align: top, quindi assicuratevi che il vostro font-size e il rapporto di line-height match up destra.