css實現表單label文字兩端對齊

如圖，在我們寫頁面的時候，經常遇到這種的情況，而需求是想讓label文字兩端對齊，我們來看看如何用css解決

/**css代碼**/
　　ul li{
　　　　list-style: none;
　　}
　　.info-item  label{
　　　　display: inline-block;
　　　　width: 80px;
　　　　height:30px;
　　　　line-height:30px;
　　　　vertical-align: middle;
　　　　text-align: justify;
　　　　text-align-last: justify 
　　}

/**html代碼**/

    <ul class="info">
        <li class="info-item">
            <label for="user">用戶名</label>
            <input type="text"  id="user"/>
        </li>
        <li class="info-item">
            <label for="psw">密碼</label>
            <input type="password"  id="psw"/>
        </li>
        <li class="info-item">
            <label for="email">電子郵箱</label>
            <input type="text"  id="email"/>
        </li>
    </ul>

 

　　關鍵代碼是text-align:justify; text-align-last:justify

　　text-align-last 屬性規定如何對齊文本的最后一行。由於label標簽只有一行文本，所以text-align-last屬性必須指定。

      但是：text-align-last屬性不兼容Safari瀏覽器，因此，以上代碼在Safari瀏覽器中不會生效，label文本依然是左對齊。

　　那該如何解決？

/**css代碼**/
　　ul li{
　　　　list-style: none;
　　}
　　.info-item  label{
　　　　display: inline-block;
　　　　width: 80px;
　　　　height:30px;
　　　　line-height:30px;
　　　　vertical-align: middle;
　　　　text-align: justify;
　　　　text-align-last: justify 
　　}
　/**使用偽元素**/
　　label::after{
　　　　content:" ";
　　　　display:inline-block;
　　　　width:100%
　　}

 完美～～～