• css实现表单label文字两端对齐


    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决

    /**css代码**/
      ul li{
        list-style: none;
      }
      .info-item  label{
        display: inline-block;
         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;
         80px;
        height:30px;
        line-height:30px;     vertical
    -align: middle;     text-align: justify;     text-align-last: justify   }
     /**使用伪元素**/
      label::after{
        content:" ";
        display:inline-block;
        100%
      }

     完美~~~

      

  • 相关阅读:
    60)模板类去派生新的子类
    linux ssh搭建
    javascript学习6-练习之3二分查找算法
    javascript学习5-练习之2冒泡排序算法
    javascript学习4-练习之1转置矩阵
    javascript学习3-自定义函数
    计算机网络学习1-网络层次
    javascript学习-安全初探之沙箱
    html学习1-html5基础学习
    jquery学习之1.23-ajax使用
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11190259.html
Copyright © 2020-2023  润新知