表單文本兩端對齊
阿新 • • 發佈：2017-08-03
:after meta pad ast vertica hid ott cnblogs col
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; 22overflow: 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>
表單文本兩端對齊