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

     完美~~~

      

  • 相关阅读:
    MVC 传值
    LINQ to SQL 语句(2)之 Select/Distinct
    LINQ to SQL 语句(1)之 Where
    输入变量相同情况下,结果不正确
    vmware ubuntu 切换终端命令行
    汉字编码问题
    Windows API所提供的功能可以归为七类
    比较好的c++博文
    环境和库的引入
    C#调用Fortran生成的DLL的方法报内存不足
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11190259.html
Copyright © 2020-2023  润新知