主要在于设置textarea 与label 的vertical-align属性
代码实例如下:
html代码:
<form class="customer-form" action="/s">
<div class="customer-name">
<label for="customerName">姓名</label>
<input id="customerName" type="text" placeholder="请输入姓名">
</div>
<div class="customer-name">
<label for="customerEmail">邮箱</label>
<input id="customerEmail" type="text" placeholder="请输入邮箱">
</div>
<div class="customer-name">
<label for="customerTel">电话</label>
<input id="customerTel" type="text" placeholder="请输入手机号">
</div>
<div class="customer-name">
<label for="customerCompany">公司</label>
<input id="customerCompany" type="text" placeholder="请输入公司名称">
</div>
<div class="customer-name">
<label for="customerMessage">留言</label>
<textarea id="customerMessage"></textarea>
</div>
<div>
<button id="submit">提交</button>
</div>
</form>
css代码如下(用的less编码,记得转换一下):
.customer-form{
>div{
margin-bottom: 20px;
}
label{
display: inline-block;
vertical-align: middle;
color: #000;
font-weight: normal;
}
input{
vertical-align: middle;
width: 610px;
height: 36px;
}
textarea{
width: 610px;
height: 96px;
resize:none;
vertical-align: middle;
}
}