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

可以将整个界面分为三块，左中右。通过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. android中通过代码来设置蓝牙永久可见性

    废话不多说,直接阐述: 前段时间在搞一个android项目,其中有一个功能要求需要蓝牙可见性永久打开,但是开发过android蓝牙的程序员应该都知道,goole提供的api中没有设置蓝牙永久可见性的接 ...

  2. HashMap? ConcurrentHashMap?

    前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...

  3. Eclipse 窗口说明

    Eclipse 窗口说明 Eclipse 工作台(Workbench) 首先,让我们来看一下Eclipse 作台用户界面,和它里面的各种组件. 工作台是多个窗口的集合.每个窗口包含菜单栏,工具栏,快捷 ...

  4. C# winform中 选择文件和保存文件

    转载自https://blog.csdn.net/qq_31788297/article/details/62047952 我们在使用桌面软件的时候经常会使用到选择文件并打开和另存为等的窗口,这样方便 ...

  5. android自定义View_2——Making the View Interactive

    前言:绘制出一个view只是自定义view的一个部分,还需要自定义一些view的行为,来反馈用户的使用操作,反馈的 行为要合理性,就像真是的物理世界一样,不要太玄幻哦. 可以将view的行为封装到in ...

  6. SQL2008删除大量数据

    常见问题:工作中数据库难免产生大量的日志,而用户可能关心的只有最近一个月左右的,这些日志占用了服务器磁盘,还可能影响了服务运行效率.甚至在数据库迁移时更因为体积而带来巨大麻烦. 那么,在需要时,删除不 ...

  7. Type Group(类型组)

    在 APAP 程序开发中, 经常需要定义一些常量或变量, 而且可能存在多个程序中需要用到的类似的变量或结构体, SAP 提供了类型组, 允许用户建立一些公用的对象, 允许在不同的程序中调用, 这样不但 ...

  8. POJ 1848 Tree

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 3506   Accepted: 1204 Description ...

  9. MVC action 执行两次 background url()

    大年初七第一天上班就来解决问题,我也是醉了. 其实是历史遗留问题,今天看到后不能忍了,赶紧解决一下. 旧系统中以一个微信版本的列表页面没有问题,在新系统中重新开发一边后发现列表页面的action总是请 ...

  10. EasyGBS国标流媒体视频平台接入海康、大华、宇视的摄像机、硬盘录像机NVR、国标下级平台的方案

    在上一篇<EasyNVR和EasyDSS云平台联手都不能解决的事情,只有国标GB28181能解决了>我们大致介绍了国标GB/T28181的使用场景,而且初步介绍了EasyGBS国标视频平台 ...