CSS表单对齐方式

这里例举一个表单的代码，如下：

<div>
    <div class="box">
        <label>输入用户名：</label>
        <input placeholder="用户名">
    </div>
    <div class="box">
        <label>输入密码：</label>
        <input placeholder="密码">
    </div>
    <div class="box">
        <label>重复输入密码：</label>
        <input placeholder="密码">
    </div>
    <div class="box">
        <label>输入邮箱：</label>
        <input placeholder="邮箱">
    </div>
    <div class="box">
        <label>输入手机：</label>
        <input placeholder="手机">
    </div>
    <div class="box">
        <button>注册</button>
    </div>
</div>

显示效果：

首先需要给所有的<label>标签增加width属性，给定一个宽度如“width:120px”，使得所有的<input>实现对齐：

 （1）实现<label>标签里文字的两边对齐方式，增加“text-align-last: justify”：

 （2）实现<label>标签里文字靠右对齐，增加“text-align: right”：（如果靠左对齐，则增加“text-align: left”）