在做百度前端技术学院 HTML/CSS作业的时候，遇到了这样的挑战。
在当时我还不知道要用label写 input前面的文字，所以用的表格布局，强行让其对齐。
后来在 stackoverflow 发现了这种解决方案 : 让label成为行内块元素，给其宽度，然后让文字居右即可。
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左对齐效果
