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