CSSlabeltextarea垂直对齐1.垂直顶部对齐
<style type="text/css">
/*--- 清除浮动 ---*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { display:inline-block;}
.clearfix { display:block;}
label { line-height:21px; float:left; margin-right:3px;}
</style>
<div>
<p class="clearfix">
<label for="name">姓名</label>
<input type="text" name="name"/>
</p>
<p class="clearfix">
<label for="msg">留⾔</label>
<textarea name="msg" rows="5" cols="13"></textarea>
</p>
</div>
2.垂直居中对齐
<style type="text/css">
input,textarea { display:inline-block; margin-right:3px; vertical-align:middle;}
</style>
<div>
<p class="clearfix">
<label for="name">姓名</label>
<input type="text" name="name" />
</p>
<p class="clearfix">
<label for="msg">留⾔</label>
<textarea name="msg" rows="5" cols="13"></textarea>
</p>
</div>
textarea中cols表示3.垂直底部对齐（推荐）
<style type="text/css">
.box-input-label input{width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:bottom;}
.box-input-label label{line-height:1em;cursor:pointer;display:inline-block;vertical-align:bottom;}
</style>
<div class="box-input-label">
<input id="cb" type="checkbox" />
<label for="cb">全选</label>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。