與基線和文本區域垂直對齊

我試圖在文本區域中獲得與第一行文本的基線對齊的標籤。與基線和文本區域垂直對齊

天真的嘗試：

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

導致標籤與文本區域的底部對齊。我寧願讓它與該區域的第一行排成一行。

謝謝。

來源

2010-09-17 jmo

標籤和textarea的字體大小是否相同？ – 2012-03-08 20:42:51

你需要把labeldiv相同div內的textarea的，那麼，如果你想將其設置爲的textarea你要找的vertical-align: top，不baseline頂部。

視圖和示例這裏：
http://jsfiddle.net/anhus/

來源

2010-09-17 15:48:32 Robert

問題是我想要文本排列在textarea文本的基線上。將其與文本區域的頂部對齊時，將其與其他與基準對齊的標籤+文本字段進行比較時看起來有誤。 – jmo 2010-09-17 18:57:46

好的，只需將'vertical-align：top'更改爲你想要的。基線，或其他。 – Robert 2010-09-17 19:42:22

-1：錯過了這一點。他希望將標籤基線與textarea的* first *基線對齊，這是排版正確的事情。我仍然沒有找到一個好的方法來做到這一點 - 無論何時您標註的內容都有不同的文字指標。 – 2012-02-13 22:08:01

的問題是，textarea的被視爲一個塊，像的圖像。在進行垂直對齊時，它使用邊框來確定位置而不是文本。在下面的示例中，您可以看到標籤和div基於文本內部的位置進行定位，其中textarea的行爲與圖像相似。

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

我認爲，以獲取標籤和文本區域對準您想要的方式唯一的辦法就是做一個垂直對齊：頂部，然後確保你的字體大小和行高的比例搭配起來對。

來源

2012-03-08 21:09:19

進一步看，你可以看到，使用基線甚至不能使用像標籤和div這樣的兩個塊級元素。該標籤排列在div的最後一行。 – 2012-03-08 21:15:47

謝謝！對我有用。 – Boyang 2013-08-06 03:32:56

與基線和文本區域垂直對齊

回答

相關問題