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

<!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. JSTL标签,EL表达式,OGNL表达式，struts2标签 汇总

    一下纯属个人总结摘抄,总结一起方便查看,解决疑问,有遗漏或错误,还请指出.       1,JSTL标签总结: a).JSTL标签有什么用?          JSTL是由JCP(Java Commu ...

  2. scan design flow(一)

    一个典型的scan实现的flow: clock mux和一些rst,在Scan中都被bypass掉,是不能测到的.所以DFT的test coverage一般就在97%或98%. scan design ...

  3. wc移植sae笔记

    1.wc移植到sae---上传图片 ①先看profile.ptl.html中的ajax代码修改functions.js中G_BASE_URL的值.在这里我先写死成->'http://2.idan ...

  4. 三层架构和MVC模式

    目录[-] 1.三层架构 2.MVC 2.1 标准的MVC(Model-View-Controller) 2.2 Web MVC 3.三层架构和MVC的区别与联系 1.三层架构 三层架构(3-tier ...

  5. ASP.NET MVC的TempData（转载）

    本文章基于ASP.NET MVC Preview5. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信 ...

  6. NOIP201208同余方程

    NOIP201208同余方程 描述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入只有一行,包含两个正整数a, b,用一个空格隔开. 输出格式 输出只有一行,包含 ...

  7. java - Annotation元数据

    Annotation元数据(一) 一.Annotation究竟是什么? 是java5.0中的新特征 数据的数据(元数据) Annotation和访问修饰符一样,应用于包.类型.构造方法.方法.成员变量 ...

  8. Hadoop实战4：MapR分布式集群的安装配置及shell自动化脚本

    MapR的分布式集群安装过程还是很艰难的,远远没有计划中的简单.本人总结安装配置,由于集群有很多机器,手动每台配置是很累的,编写了一个自动化配置脚本,下面以脚本为主线叙述(脚本并不完善,后续继续完善中 ...

  9. listview中item 有checkbox多选防止滑动 listview页面 出现checkbox错位问题

    checkbox点击切换背景 <CheckBox android:id="@+id/checkbox" android:layout_width="40dp&quo ...

  10. android 项目学习随笔十九（MD5）

    import java.security.MessageDigest; public class MD5Encoder { public static String encode(String str ...