zoukankan      html  css  js  c++  java
  • 表单文本两端对齐

    1.在页面布局的时候,只要有表单就存在这个对齐方式的应用。

    2.来源于网络,出处已忘记。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title>文本2端对齐</title>
     6     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
     7 <style type="text/css">
     8 
     9 *{padding: 0;margin: 0;}
    10 html,body{height: 100%}
    11 ul{list-style: none;}
    12 .list {
    13     padding: 0 20px;
    14     margin: 20px auto;
    15 }
    16 
    17 .list li {
    18     height: 40px;
    19     line-height: 40px;
    20     border-bottom: 1px #000 solid;
    21     padding: 0 20px;
    22     overflow: hidden;
    23 }
    24 
    25 .list li .text {
    26     display: inline-block;
    27     width: 90px;
    28     height: 40px;
    29      margin-right: 15px;
    30      float: left;
    31      text-align:justify;
    32      text-align-last:justify;
    33      height:44px;
    34      font-size: 12px;
    35 }
    36 .list li .text:after{
    37      display:inline-block;
    38      overflow:hidden;
    39      width:100%;
    40      height:0;
    41      content:'';
    42      vertical-align:top;
    43 }
    44 </style>
    45 </head>
    46 <body>
    47 
    48  <ul class="list">
    49      <li>
    50          <span class="text">银 行 卡 号</span>
    51          <input type="text" placeholder="请输入银行卡号"/> 
    52      </li>
    53      <li>
    54          <span class="text">卡 号</span>
    55          <input type="text" placeholder="请输入卡号"/> 
    56      </li>
    57      <li>
    58          <span class="text">电 话 号</span>
    59          <input type="text" placeholder="请输入电话号"/> 
    60      </li>
    61      <li>
    62          <span class="text">身 份 证 地 址</span>
    63          <input type="text" placeholder="请输入身份证地址"/> 
    64      </li>
    65  </ul>
    66 
    67 </body>
    68 </html>
  • 相关阅读:
    django自带登录认证与登录自动跳转
    11月份草稿2
    使用JavaScript实现字符串格式化
    requests与BeautifulSoup
    python+minicap(二)
    python+minicap的使用
    python+opencv图像处理(一)
    haproxy实现mysql从库负载均衡
    mysql 5.7 64位 解压版安装
    Redis基础教程
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/7277256.html
Copyright © 2011-2022 走看看