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>

 

posted @ 2014-10-14 14:48  王子秦  阅读(1338)  评论(0)  编辑  收藏  举报