首页 > 代码库 > DIV的表单布局
DIV的表单布局
表单布局其实用表格最好了，可是表格的话，无法定位，这个是一个硬伤。
<!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>
DIV的表单布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。