【CSS】用fieldset、ol、li创建整齐干净的提交表单
先上效果图：
再上代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>标题</title> <style type="text/css"> /*CSS样式*/ fieldset{ width:316px; } fieldset ol{ list-style:none; padding:0px; magin:2px; } fieldset ol li{ margin:0 0 9px 0; padding:5px; clear:both; } fieldset label{ width:100px; float:left; text-align:right; padding:0 5px 0 0; } fieldset input{ float:left; /* display:none;*/ } </style> </head> <body> <form> <fieldset id=""> <legend>Create New Account</legend> <ol> <li> <label for="first_name">First Name:</label> <input id="first_name" type="text" placeholder="Bill"> </li> <li> <label for="last_name">Last Name:</label> <input id="last_name" type="text" placeholder="Gates"> </li> <li> <label for="email">Email:</label> <input id="email" type="text" placeholder="bg@ms.com"> </li> <li> <label for="pswd">Password:</label> <input id="pswd" type="password" placeholder="6-8 characters"> </li> <li> <label for="smt"> </label> <input id="smt" type="submit" value="提交注册"/> </li> </ol> </fieldset> </form> </body> </html> <script type="text/javascript"> <!-- // 脚本 //--> </script>
End
