HTML/CSS：標籤和輸入表格對齊

Question

我怎樣才能將我的「消息」文本對齊到頂端，因爲現在它被放置在底部。

演示：https://jsfiddle.net/WX58z/1096/

<div class="block"> 
    <label>Message</label> 
    <textarea name="Message" rows="4" id="Message" style="width:300px;"> 
    </textarea> 
</div> 

Answer 1

它只是在vertical-align屬性：

.block label { 
    display: inline-block; 
    width: 140px; 
    text-align: right; 
    vertical-align: top; 
} 

Answer 2

使用vertical-align property更改文本的對齊方式：

.block label { 
 
    display: inline-block; 
 
    width: 140px; 
 
    text-align: right; 
 
    vertical-align: top; /*HERE*/ 
 
}

<div class="block"> 
 
    <label>Name</label> 
 
    <input type="Name" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Phone Number</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Email</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Message</label> 
 
<textarea name="Message" rows="4" id="Message2" style="width:300px;"></textarea> 
 
</div>

Answer 3

.block label { 
    display: inline-block; width: 140px; text-align: right; vertical-align:top; 
} 

使用vertical-align: top;

Answer 4

添加float:left;到標籤標籤：fiddle

Answer 5

你的CSS改成這樣：

.block label { 
    display: inline-block; width: 140px; text-align: right; vertical-align:top; 
}