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

<!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的表单布局的更多相关文章

  1. 基于表单布局：分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  2. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:     1.通过event对象的srcElement属性:     2.通过事件源对象用this传入.     代码如下: <html> <head> ...

  5. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  6. Qt之表单布局（QFormLayout）

    简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:Q ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局

    系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...

  8. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  9. html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

随机推荐

  1. 夺命雷公狗---DEDECMS----29dedecms热门大片的完成

    我们要完成的是热门大片的显示,如下所示: 热门大片,这一般都是按照浏览量高的放前面的而已,我们先来查查手册,如下所示: 这里发现我们的arclist标签里面的orderby和orderway完全可以实 ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON AddNoiseWhite

    zw版[转发·台湾nvp系列Delphi例程]HALCON AddNoiseWhite unit Unit1;interfaceuses Windows, Messages, SysUtils, Va ...

  3. ASP.NET 中通过Form身份验证 来模拟Windows 域服务身份验证的方法

    This step-by-step article demonstrates how an ASP.NET   application can use Forms authentication to ...

  4. viewpager+fragment+HorizontalScrollView

    xml布局 <RelativeLayout        android:id="@+id/rl_column"        android:layout_width=&q ...

  5. 验证（Javascript和正则表达式）

    昨天写了验证(C#和正则表达式),今天又写了个js版的验证.现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发.由于今天才开始接触js,所以可能会有一些错漏,希望大家能批评指正. va ...

  6. 【python cookbook】【字符串与文本】11.从字符串中去掉不需要的字符

    问题:在字符串的开始.结尾或中间去掉不需要的字符,比如说空格符 解决方案: 1.字符串开始或结尾处去掉字符:str.strip() 2.从左或从右侧开始执行去除字符:str.lstrip().str. ...

  7. Error -26612: HTTP Status-Code=500 (Internal Server Error) ...

    造成HTTP-500错误,有朋友告诉我如下几个可能: 1.运行的用户数过多,对服务器造成的压力过大,服务器无法响应,则报HTTP500错误.减小用户数或者场景持续时间,问题得到解决. 2.该做关联的地 ...

  8. html插入视频

    http://www.jb51.net/web/168548.html http://www.w3school.com.cn/html/html_media.asp

  9. Runloop应用实例

    AFNetworking AFURLConnectionOperation 这个类是基于 NSURLConnection 构建的,其希望能在后台线程接收 Delegate 回调.为此 AFNetwor ...

  10. NSData NSDate NSString NSArray NSDictionary 相互转换

    // NSData NSDate NSString NSArray NSDictionary json NSString *string = @"hello word"; NSDa ...