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

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

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <style type="text/css">

        .peopleinfo {

            text-align: center;

        }

        .peopleinfo>div {

            display: inline-block;

        }

        .attribute>label {

            float: right;

            margin-bottom: 6px;

        }

        .infodetail>input {

            float: left;

        }

        .comment>label {

            float: left;

            margin-bottom: 6px;

        }

    </style>

</head>

<body>

    <div class="container" style="border:1px dotted #ccc; width: 400px;margin-top: 100px">

        <div class="peopleinfo">

            <div class="attribute">

                <label for="name">姓名：</label><br/>

                <label for="phone">电话：</label><br/>

                <label for="email">邮箱：</label><br/>

                <label for="address">地址：</label><br/>

                <label for="idcard">身份证：</label><br/>

                <label for="othercard">其他证件：</label><br/>

                <label for="note">备注：</label><br/>

            </div>

            <div class="infodetail">

                <input type="text" id="name" name="name" /><br/>

                <input type="tel" id="phone" name="phone" /><br/>

                <input type="email" id="email" name="email" /><br/>

                <input type="text" id="address" name="address" /><br/>

                <input type="text" id="idcard" name="idcard" /><br/>

                <input type="text" id="othercard" name="othercard" /><br/>

                <input type="text" id="note" name="note" /><br/>

            </div>

            <div class="comment">

                <label>*</label><br/>

                <label>*</label><br/>

                <label></label><br/>

                <label></label><br/>

                <label></label><br/>

                <label></label><br/>

                <label></label><br/>

            </div>

        </div>

    </div>

</body>

</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. HDU 5355 Cake(2015多校第六场，搜索 + 剪枝）

    Cake Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  2. BZOJ 1260 CQOI2007 涂色paint 动态规划

    题目大意:给定一块木板,上面每一个位置有一个颜色,问最少刷几次能达到这个颜色序列 动态规划,能够先去重处理(事实上不是必需),令f[i][j]代表将i開始的j个位置刷成对应颜色序列的最小次数.然后状态 ...

  3. Win10 Anaconda下TensorFlow-GPU环境搭建详细教程（包含CUDA+cuDNN安装过程）（转载）

    win7(win10也适用)系统安装GPU/CPU版tensorflow Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程) 目录 2.配置 ...

  4. Harmonic Number 求Hn； Hn = 1 + 1/2 + 1/3 + ... + 1/n; （n<=1e8) T<=1e4; 精确到1e-8； 打表或者调和级数

    /** 题目:Harmonic Number 链接:https://vjudge.net/contest/154246#problem/I 题意:求Hn: Hn = 1 + 1/2 + 1/3 + . ...

  5. markdown编辑器的小建议

    markdown编辑器使用建议 yaung  by 2012.12.1-------- 这里主要说明一下我们在windows和linux下对md文件的编辑方法,为大家提供一点个人建议,如果有更好的选择 ...

  6. MPEG 编解码相关资料收集

    以下是我搜集的关于MPEG1/2的编解码相关的资料: (注:mpge帧内编码是基于jpeg编码的,所以请务必先理解jpeg的编解码原理.) 1:Introduction to MPEG 2 Video ...

  7. Tomcat访问日志详细配置(转)

    在server.xml里的<host>标签下加上<Valve className="org.apache.catalina.valves.AccessLogValve&qu ...

  8. iOS学习笔记（十）——iOS真机调试

    前面一直使用模拟器运行,今天使用了真机调试,这一篇介绍一下真机调试.真机调试需要99$注册,如果有注册过的账号,也可以使用注册账号邀请你加入一个账号下,注册账号可以给你分配权限,我也是使用的邀请成为开 ...

  9. BUFSIZ解析

    BUFSIZ解析: 包含在#include<stdio.h>中,BUFSIZ[=8192]. stdio.h:#ifndef BUFSIZ stdio.h:#define BUFSIZ _ ...

  10. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...