CSS表单，标题文字对齐

CSS表单，标题文字对齐

• 经常会遇到CSS表单中，每一行文字个数不相等，导致不能对齐，可以试试以下的方法，关键点在于，将前面的标题用单独的标签装起来，然后给该标签设置text-align: justify; 和text-align-last: justify;

• 最终是要实现一下想
  

• 下面是一个例子：
  HTML代码：

            <form action="" >
                <label htmlFor="" >
                    <span class='text'>用户名</span>
                    <span>：</span>
                    <input type="text" /></label>
                <br />
                <label htmlFor="" >
                    <span class='text'> 密码</span>
                    <span>：</span>
                    <input type="password" /></label>
                <br />
                <button>登录</button>
            </form>

CSS代码：

form {
    width: 100%;
    height: 100px;
    background-color: aqua;

}

.text {
    display: inline-block;
    width: 80px;/*要保证能放得下最长的文字，也可以设置为溢出隐藏形式：overflow: hidden;*/
    text-align: justify;
    text-align-last: justify;
    vertical-align: middle;/*保证文字和input框上下是对齐的*/
}

button {
    margin-top: 10px;
}