对于如下的界面，介绍一种实现方式。

可以将整个界面分为三块，左中右。通过display: inline-block;和float: right;左右浮动效果实现。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="css/bootstrap.min.css">
  7.     <script type="text/javascript" src="js/bootstrap.min.js"></script>
  8.     <script type="text/javascript" src="js/jquery.min.js"></script>
  9.     <style type="text/css">
  10.         .peopleinfo {
  11.             text-align: center;
  12.         }
  13.         .peopleinfo>div {
  14.             display: inline-block;
  15.         }
  16.         .attribute>label {
  17.             float: right;
  18.             margin-bottom: 6px;
  19.         }
  20.         .infodetail>input {
  21.             float: left;
  22.         }
  23.         .comment>label {
  24.             float: left;
  25.             margin-bottom: 6px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="container" style="border:1px dotted #ccc; width: 400px;margin-top: 100px">
  31.         <div class="peopleinfo">
  32.             <div class="attribute">
  33.                 <label for="name">姓名：</label><br/>
  34.                 <label for="phone">电话：</label><br/>
  35.                 <label for="email">邮箱：</label><br/>
  36.                 <label for="address">地址：</label><br/>
  37.                 <label for="idcard">身份证：</label><br/>
  38.                 <label for="othercard">其他证件：</label><br/>
  39.                 <label for="note">备注：</label><br/>
  40.             </div>
  41.             <div class="infodetail">
  42.                 <input type="text" id="name" name="name" /><br/>
  43.                 <input type="tel" id="phone" name="phone" /><br/>
  44.                 <input type="email" id="email" name="email" /><br/>
  45.                 <input type="text" id="address" name="address" /><br/>
  46.                 <input type="text" id="idcard" name="idcard" /><br/>
  47.                 <input type="text" id="othercard" name="othercard" /><br/>
  48.                 <input type="text" id="note" name="note" /><br/>
  49.             </div>
  50.             <div class="comment">
  51.                 <label>*</label><br/>
  52.                 <label>*</label><br/>
  53.                 <label></label><br/>
  54.                 <label></label><br/>
  55.                 <label></label><br/>
  56.                 <label></label><br/>
  57.                 <label></label><br/>
  58.             </div>
  59.         </div>
  60.     </div>
  61. </body>
  62. </html>

css小知识---input输入块的更多相关文章

  1. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

  2. 几个有益的 CSS 小知识

    样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...

  3. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  4. 一些常被你忽略的CSS小知识

    1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可 ...

  5. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  6. 你未必知道的css小知识

    1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...

  7. css 小知识

    <!-- IE下消除点击图片文字后出现的虚线框代码 --> <style type="text/css">a {blr:expression(this.on ...

  8. css小知识

    7. span { display:inline-block; width:70px; /* 超出长度以...显示 */ text-overflow: ellipsis; white-space: n ...

  9. css小知识 2

    效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...

随机推荐

  1. maven项目工程报错：cannot be resolved to a type

    1.在本地仓库中,搜索“_maven.repositories”所有匹配项,并彻底删除 2.然后再删除“.lastUpdated”所有匹配项 3.最后再重新在eclipse中执行操作:update d ...

  2. python学习---简介

    http://www.cnblogs.com/wuguanglei/p/3866583.html http://www.cnblogs.com/wuguanglei/p/3866583.html ok ...

  3. Cocoapod安装使用和常见问题

    1.cocoapod的按照,cocoapod是运行在ruby环境下的,在ruby环境的 ,像cocoapod这样的开源项目时放在放在rubygems服务器上面的,但国内访问https://rubyge ...

  4. poj 2516(拆点+最小权匹配)

    题目链接:http://poj.org/problem?id=2516 思路:考虑某种货物,由于某个订货商可能接受来自不同地区的货物,而某一地区的货物也可能送给不同的订货商,显然不能直接进行匹配,必须 ...

  5. 字符串匹配（KMP 算法 含代码）

    主要是针对字符串的匹配算法进行解说 有关字符串的基本知识 传统的串匹配法 模式匹配的一种改进算法KMP算法 网上一比較易懂的解说 小样例 1计算next 2计算nextval 代码 有关字符串的基本知 ...

  6. PHP输出语句大杂烩

    一 echo echo() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void的,并 ...

  7. CodeIgniter框架——源码分析之Config.php

    CI框架的配置信息被存储在$config数组中,我们可以添加自己的配置信息或配置文件到$config中: $this->config->load('filename'); //加载配置文件 ...

  8. 【BZOJ4825】[Hnoi2017]单旋 线段树+set

    [BZOJ4825][Hnoi2017]单旋 Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能 ...

  9. 巨蟒python全栈开发flask1

    1.整体把握 (1)路飞学城 - RestAPI 前后端分离开发 Django Vue.js - DRF DjangoRestFromwork - 线上商城的经验 (2)智能玩具 - RestAPI ...

  10. websocket Session 不支持序列化

    这是我本来的打算,把socket session 进行序列化分布式存储! 呵呵   然而现实很残酷,这b东西不支持序列化! 解决办法: