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

<!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. Ubuntu 13.10 64位 无法 安装 ia32-libs 解决办法

    安装新立德软件包管理器:打开终端,输入以下命令:sudo apt-get install synaptic 打开新立德软件包管理器,选择“设置>软件库” 选择“其他软件 > 添加” 在AP ...

  2. Delphi 取得桌面文件夹的路径和取得我的文档的路径

    Uses Windows,Registry; function GetShellFolders(strDir: string): string; const regPath = '\Software\ ...

  3. android 学习随笔十一(网络：HttpClient框架)

    1.使用HttpClient框架发送get.post请求 google收集apache提供的一个发送Http请求框架 public class Tools { public static String ...

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

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

  5. gerrit

    https://en.wikibooks.org/wiki/Git/Gerrit_Code_Review http://openwares.net/linux/gerrit2_setup.html 不 ...

  6. java笔试题: ——将e:/source文件夹下的文件打个zip包后拷贝到f:/文件夹下面

    将e:/source文件夹下的文件打个zip包后拷贝到f:/文件夹下面 import java.io.*; import java.util.zip.ZipEntry; import java.uti ...

  7. Java字符串排列算法

    Java字符串排列算法 题目:现有ABCDE 5个球 构成的排列组合 可重复抽取 最多取到16个 共有多少种组合方式? 比如:取1个球可以构成的组合有 A B C D E 共5种,取2个球可以构成的组 ...

  8. 如何通过ps -ef|grep tomcat只获得你需要的查询进程，排除掉grep本身的进程信息

    执行命令:ps -ef|grep tomcat|grep /opt/upay3/application/dispatcherTomcat/bin输出的进程信息会显示2个:包括grep本身的进程+你查询 ...

  9. 161208、Java enum 枚举还可以这么用

    在大部分编程语言中,枚举类型都会是一种常用而又必不可少的数据类型,Java中当然也不会例外.然而,Java中的Enum枚举类型却有着许多你意想不到的用法,下面让我们一起来看看. 先来看一段代码示例: ...

  10. win10启动文件夹:

    win10启动文件夹: C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp