實現表單label兩端對齊

主要使用css3屬性

text-align: justify;

text-align-last: justify;

上代碼：

<ul>
        <li>
            <label class="mark">用戶名</label>
            <div>
                <input type="text" id="form-name" />
            </div>
        </li>
        <li>
            <label class="mark">驗證碼</label>
            <div>
                <input type="text" id="form-verifiy" />
            </div>
        </li>
        <li>
            <label class="mark">密碼</label>
            <div>
                <input type="text" id="form-password" />
            </div>
        </li>
        <li>
            <label class="mark">確認密碼</label>
            <div>
                <input type="text" id="form-sure_pass" />
            </div>
        </li>
    </ul>

li {

    clear: both;

    list-style: none;

}

 

.mark {

    display: block;

    float: left;

    overflow: hidden;

    width: 78px;

    height: 29px;

    padding-right: 10px;

    text-align: justify;

    text-align-last: justify;

}


效果展示：