当各个input框前面名字长度不等时，让上下input框对齐方法

我们常常会遇到这样的情形，因为多写了一个中文导致框框突出，造成了难看的效果。

---

方案一：用 填充,不推荐。

            <div>
                用户名：<input />
            </div>
            <div>
                密码：&nbsp;&nbsp;&nbsp;<input />
            </div>
            <div>
                邮箱：&nbsp;&nbsp;&nbsp;<input />
            </div>

效果还是有瑕疵的：

---

方案二:使用table标签进行布局，主流推荐。

            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input /></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input /></td>
                </tr>
                <tr>
                    <td>邮箱：</td>
                    <td><input /></td>
                </tr>
            </table>

---

方法三：用label标签来对齐,需要调整min-width参数

<label style="display: inline-block;min-width: 50px;">登录名</label><input />
<br />
<label style="display: inline-block;min-width: 50px;">密码</label><input />

---

方法四：利用text-align: right;属性,需要看自己的情况调整width参数

    <div style="display: flex;flex-direction: column;align-items: center;">
        <div style="width: 260px;text-align: right;">
            <div>用户名:<input /></div>
            <div>密码：<input /></div>
            <div>确认密码：<input /></div>
        </div>
    </div>

---

方法五：利用input框的margin-left属性，也是需要酌情调整参数px的大小

    <div style="display: flex;flex-direction: column;align-items: center;">
        <div>
            <div>用户名:<input /></div>
            <div style="margin-left: 4px;">密码：<input /></div>
            <div style="margin-left: -28px;">确认密码：<input /></div>
        </div>
    </div>

---

方法六：利用定位属性position: relative属性，需要酌情调整left参数px的大小

            
    <div style="display: flex;flex-direction: column;align-items: center;">
        <div>
            <div>用户名:<input /></div>
            <div style="position: relative;left: 4px;">密码：<input /></div>
            <div style="position: relative;left: -28px;">确认密码：<input /></div>
        </div>
    </div>

方法七：利用float: right浮动属性，但必须要清除浮动带来的弊端clear: both

    <div style="display: flex;flex-direction: column;align-items: center;">
        <div>
            <div style="float: right;">用户名:<input /></div>
            <div style="clear: both;"></div>
            <div style="float: right;">密码：<input /></div>
            <div style="clear: both;"></div>
            <div style="float: right;">确认密码：<input /></div>
            <div style="clear: both;"></div>
        </div>
    </div>

---

方法八：利用行内样式span标签实现,推荐。

        <div style="display: flex;flex-direction: column;align-items: center;">
            <div>
                <span style="display:inline-block;width:200px;text-align:right;">用户名: </span> 
                <input />
            </div>
            <div>
                <span style="display:inline-block;width:200px;text-align:right;">密码: </span> 
                <input />
            </div>
            <div>
                <span style="display:inline-block;width:200px;text-align:right;">确认密码: </span> 
                <input />
            </div>
        </div>

如果还要其他的方式，欢迎大家评论区留言进行补充。