表单文本两端对齐
Posted 橙云生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单文本两端对齐相关的知识，希望对你有一定的参考价值。
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>
以上是关于表单文本两端对齐的主要内容，如果未能解决你的问题，请参考以下文章