zoukankan      html  css  js  c++  java
  • 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%
      }

     完美~~~

      

  • 相关阅读:
    Tomcat项目部署
    java 项目时间和服务器时间不一致
    初始bat命令
    前端入门学习路线
    后台报错java.lang.IllegalArgumentException: Invalid character found in the request target.
    mysql
    java运行时数据区
    java 静态初始化块,初始化块,构造器执行顺序
    java byte和char
    springboot加载外部的配置文件
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11190259.html
Copyright © 2011-2022 走看看