首页 > 代码库 > 表单文本两端对齐

表单文本两端对齐

2024-11-15 13:46:02   203人阅读

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>

 

表单文本两端对齐


联系
我们