表单布局其实用表格最好了，可是表格的话，无法定位，这个是一个硬伤。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单布局</title> <link rel="stylesheet" type="text/css" href="css/jnreset.css"> <style> .formList{ margin:2px 0;} .formList:before,.formList:after {content:""; display:table;} .formList:after { clear:both; } .formList{ zoom:1;} .formList .formTit{ width:100px; line-height:30px; float:left; text-align:right;} .formList .formMain{ margin-left:100px; padding-top:2px;} .formList .formMain input{position:relative;top:2px;} .formList .formMain select{position:relative;top:4px;} .formList .formMain label{ margin-right:20px;} .formList .formMain label input{ margin-right:3px; top:2px;} </style> </head> <body> <div class="formList"> <div class="formTit"><label for="name">姓名：</label></div> <div class="formMain"><input type="text" id="name" /></div> </div> <div class="formList"> <div class="formTit">性别：</div> <div class="formMain"><input type="radio" name="sex" id="man" /><label for="man">男</label><input type="radio" name="sex" id="woman" /><label for="woman">女</label></div> </div> <div class="formList"> <div class="formTit">性别：</div> <div class="formMain"><input type="checkbox" name="sex" /><label>男</label><input type="checkbox" name="sex" /><label>女</label></div> </div> <div class="formList"> <div class="formTit">性别：</div> <div class="formMain"> <select> <option>我的这个是什么情况</option> </select> </div> </div> <div class="formList"> <div class="formTit">文件：</div> <div class="formMain"> <input type="file" /> </div> </div> <div class="formList"> <div class="formTit">备注：</div> <div class="formMain"> <textarea></textarea> </div> </div> <div class="formList"> <div class="formTit"></div> <div class="formMain"> <input type="button" value="登录" /> </div> </div> </body></html>