有關用戶注冊界面或者登陸界面總會涉及form表單文本與輸入框各自對齊的問題，前段時間學習的時候總結了下面兩個常用方法
1.使用<table>表格元素
2.使用<fieldset><label>元素分區分塊
以下是簡單的代碼驗證，一些屬性參數可自行調節。初學css,希望后來者可以補充說明。
（補充：實際問題中，當表單填寫有單選框，復選框，文本域等元素的時候第2中方法並不能實現）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 table{ 8 width: 100%; 9 text-align: center; 10 11 } 12 .th{ 13 height: 40px; 14 width: 50%; 15 text-align: right; 16 } 17 td{ 18 height: 40px; 19 width: 50%; 20 text-align: left; 21 } 22 </style> 23 </head> 24 <body> 25 <form action="post" method="#"> 26 <table summary="this is a form"> 27 <tr> 28 <td class="th">用戶名：</td> 29 <td><input type="text" name="user"></td> 30 </tr> 31 <tr> 32 <td class="th">密碼：</td> 33 <td><input type="password" name="pwd"></td> 34 </tr> 35 <tr> 36 <td class="th"><input type="submit" name="submit" value="登錄"></td> 37 <td><input type="reset" name="reset" value="重置"></td> 38 </tr> 39 </table> 40 </form> 41 42 </body> 43 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form fieldset{ border:0; text-align: center; } label{ display: inline-block; width: 100px; text-align: right; } input{ width: 100px; } #button input{ width: 60px; position: relative; left: 30%; } </style> </head> <body> <form action="post" method="#"> <fieldset> <p> <label>用戶名：</label> <input type="text" name="user"> </p> <p> <label>密碼：</label> <input type="password" name="pwd"> </p> <p id="button"> <input type="submit" name="submit" value="登錄"> <input type="reset" name="reset" value="重置"> </p> </fieldset> </form> </body> </html>