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%
　　}

 完美～～～

 

　　

 

转载于:https://www.cnblogs.com/AIonTheRoad/p/11190259.html