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

<!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. 《zw版Halcon与delphi系列原创教程》发布说明

    <zw版Halcon与delphi系列原创教程>发布说明 zw转载的<台湾nvp系列halcon-delphi教程>,虽然很多,不过基本上都是从cnc.数控角度的demo..  ...

  2. 对Alexia(minmin)网友代码的评论及对“求比指定数大且最小的‘不重复数’问题”代码的改进

    应Alexia(minmin)网友之邀,到她的博客上看了一下她的关于“求比指定数大且最小的‘不重复数’问题”的代码(百度2014研发类校园招聘笔试题解答),并在评论中粗略地发表了点意见. 由于感觉有些 ...

  3. 创建与删除SQL约束或字段约束

    1)禁止所有表约束的SQLselect 'alter table '+name+' nocheck constraint all' from sysobjects where type='U'2)删除 ...

  4. 由 "select *" 引发的“惨案”

    今天凌晨做发布, 要合并多个分数据库的表数据到主数据库中, 有 30+ 分数据库. 前面都比较顺利, 在临近结束时,突然发现一个字段的值插入错误. 有一个表 T,字段分别为 (f1, f2, f3, ...

  5. scala模式匹配

    package com.ming.test /** * 模式匹配 */ object MatchTest { def main(args: Array[String]): Unit = { //mat ...

  6. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  7. Java中类方法与实例方法的区别

    实例方法可以对当前对象的实例变量进行操作,也可以对类变量进行操作,但类方法不能访问实例变量.实例方法必须由实例对象来调用,而类方法除了可由实例对象调用外,还可以由类名直接调用. 另外,在类方法中不能使 ...

  8. Linux下通过crontab及expect实现自动化处理 --亲测可用

    #!/usr/bin/expect -fspawn /home/scripts/bckup.shexpect "Enter password: "  send "WWQQ ...

  9. Caused by: org.hibernate.HibernateException: Connection cannot be null when 'hibernate.dialect' not set

    docs.jboss.org文档示例代码:(http://docs.jboss.org/hibernate/annotations/3.5/reference/en/html_single/) sta ...

  10. Linux中查找最耗性能的JAVA代码

    在这里总结一下查找Linux.Java环境下最耗CPU性能的代码段的方法.基本上原理就是使用top命令查看最耗cpu的进程和线程(子进程).使用jstack把java线程堆栈给dump下来.然后,在堆 ...