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>
时间： 2024-10-15 18:02:08