在做百度前端技術(shù)學(xué)院 HTML/CSS作業(yè)的時候惋戏，遇到了這樣的挑戰(zhàn)。
在當(dāng)時我還不知道要用label寫 input前面的文字他膳，所以用的表格布局响逢，強(qiáng)行讓其對齊。
后來在 stackoverflow 發(fā)現(xiàn)了這種解決方案 : 讓label成為行內(nèi)塊元素棕孙，給其寬度舔亭，然后讓文字居右即可。
HTML 代碼如下
<form action="">
<div class="block">
<label for="username">用戶名：</label>
<input type="text" name="username">
</div>
<div class="block">
<label for="password">密碼：</label>
<input type="password" name="password">
</div>
<div class="block">
<label for="description">個人描述：</label>
<textarea name="description" cols="30" rows="10"></textarea>
</div>
<div class="block center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
CSS代碼如下：
.block{
width: 400px;
display: block;
margin:5px 0;
}
.center{
text-align: center;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
input,textarea{
vertical-align: top;
}
效果如圖所示：
label文字右對齊散罕，input左對齊效果
