這是百度的表單注冊，左邊是文字，右邊是表單元素。表單元素排列整齊，非常美觀，表單對齊，是我們在做表單的時候經常遇到的事情。
那我們看看像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>
結果
