码迷,mamicode.com
首页 > 其他好文 > 详细

DIV的表单布局

时间:2014-10-14 16:41:48      阅读:470      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   for   文件   sp   

表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤。

<!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的表单布局

标签:style   blog   color   io   os   ar   for   文件   sp   

原文地址:http://www.cnblogs.com/busicu/p/4024404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!