表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤。
<!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>