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

<!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. 夺命雷公狗---node.js---19之项目的构建在node+express+mongo的博客项目4mongodb在项目中的基本引入

    首先我们在命令行下先建立这个库: 然后我们在项目中引入mongodb的模块: var MongoClient = require('mongodb').MongoClient; var DB_STR ...

  2. [MacOS] xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change

    When using MacOS with xcode6-beta, i always meet these error: xcrun: error: active developer path (& ...

  3. SQL优化SQL tuning

    1. 索引不合适,走主键进行了key lookup查找   说明索引没有覆盖到where条件 或者  orderby 或者 group by的列

  4. url传参

    1.两种url形式传参index.php/action/function/id/2   这种模式下:$_GET[action]就是function,$_GET[id]就是2

  5. 什么是BI【转】

    产品与服务 - 商务智能 目前,商业智能产品及解决方案大致可分为数据仓库产品.数据抽取产品.OLAP产品.展示产品.和集成以上几种产品的针对某个应用的整体解决方案     商业智能是什么? 简而言之, ...

  6. android 项目学习随笔十一（ListView下拉刷新提示）

    1. 设置mHeaderView.setPadding TOPPADING为负值,隐藏刷新提示头布局 在onTouchEvent事件中进行头布局显示隐藏切换 import java.text.Simp ...

  7. django models数据类型

    Django Models的数据类型 AutoField IntegerField BooleanField true/false CharField maxlength,必填 TextField C ...

  8. eclipse字体颜色设置

    修改编码:window-->perference--->General--> Configure.--> Configure.-->workspace修改编辑背景色:wi ...

  9. ServerMediaSession::generateSDPDescription分析

    //顾名思义,就是用来生成sdp描述信息的. char* ServerMediaSession::generateSDPDescription() { //获取本地IP地址 AddressString ...

  10. linux下echo命令详解（转）

      linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个 ...