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>?
轉載于:https://www.cnblogs.com/busicu/p/4024404.html
總結
- 上一篇： 蔚蓝档案虎丸是什么?
- 下一篇： 《计算机组成与体系结构：性能设计》读后小