这是百度的表单注册,左边是文字,右边是表单元素。表单元素排列整齐,非常美观,表单对齐,是我们在做表单的时候经常遇到的事情。
那我们看看像BAT这些大公司是怎么处理这件事的呢
方法如下:
(1)每行表单分为左栏和右栏,左栏主要是文字,右栏是表单,所有行的左栏长度相等,所有行的右栏的盒子长度之和相等。
左栏一般是一个label,右栏是若干个文本框
(2)所有左栏和右栏的盒子设置为左浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单对齐</title> <style type="text/css"> form{ width: 425px; font:14px bold "Microsoft Yahei"; } p:not(.register){ width: 425px; height: 42px; } /*p清浮动*/ p{ overflow: hidden; } label:not(.nlabel){ float: left; width: 65px; height: 42px; text-align: right; margin-right: 10px; line-height: 42px; color: rgb(102, 102, 102); font-weight: 700; } input:not(.special){ float: left; width: 328px; height: 16px; padding: 11px 10px; border: 1px solid silver; } #verifyCode,#verifyBtn{ float: left; padding: 11px 10px; border: 1px solid silver; } #verifyCode{ width: 156px; } #verifyBtn{ width: 158px; margin-left: 10px; background-color: rgb(247, 247, 247); color: rgb(102, 102, 102); } #check{ vertical-align: -3px; margin-left: 75px; } .checkbox{ font-size: 12px; color: rgb(51, 51, 51); } a{ text-decoration: none; } .register{ width: 425px; height: 50px; } #register{ width: 350px; height: 50px; margin-left: 75px; background-color: rgb(63, 137, 236); color: rgb(255, 255, 255); border: none; } </style> </head> <body> <form method="post" action="#"> <p> <label for="name">用户名</label> <input type="text" id="name" placeholder="请设置用户" /> </p> <p> <label for="tel">手机号</label> <input type="text" id="tel" placeholder="可用于登录和找回密码" /> </p> <p> <label for="psw">密码</label> <input type="passsword" id="psw" placeholder="请设置密码" /> </p> <p> <label for="name">验证码</label> <input type="text" id="verifyCode" placeholder="请输入验证码" class="special" /> <input type="button" id="verifyBtn" value="获取短信验证码" class="special"/> </p> <p class="checkbox"> <input type="checkbox" id="check" class="special"> <label for="check" class="nlabel">阅读并接受</label> <a href="#">《百度用户协议》</a> 及<a href="#">《百度隐私权并保护声明》</a> </p> <p class="register"> <input type="submit" id="register" value="注册" class="special"/> </p> </form> </body> </html>
结果