在做百度前端技术学院 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左对齐效果