css小知识---input输入块
对于如下的界面,介绍一种实现方式。
可以将整个界面分为三块,左中右。通过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输入块的更多相关文章
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 几个有益的 CSS 小知识
样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 一些常被你忽略的CSS小知识
1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可 ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- 你未必知道的css小知识
1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...
- css 小知识
<!-- IE下消除点击图片文字后出现的虚线框代码 --> <style type="text/css">a {blr:expression(this.on ...
- css小知识
7. span { display:inline-block; width:70px; /* 超出长度以...显示 */ text-overflow: ellipsis; white-space: n ...
- css小知识 2
效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...
随机推荐
- VS+mysql+EF搭建
2016年7月6日更新: vs2010只需要安装mysql的.net connector就可以 vs2012, vs2015都需要安装.net connector + ODBC connector才行 ...
- Expression<Func<T, bool>>与Func<T, bool>的区别
转自:http://www.cnblogs.com/wow-xc/articles/4952233.html Func<TObject, bool>是委托(delegate) Expres ...
- python使用电子邮件模块smtplib的方法(发送图片 附件)实用可行
Smptp类定义:smtplib.SMTP(host[,port[,local_hostname[,,timeout]]]),作为SMTP的构造函数,功能是与smtp服务器建立连接,在连接成功后,就可 ...
- js 的函数参数的默认值问题
js函数参数设置默认值 php有个很方便的用法是在定义函数时可以直接给参数设默认值,如: function simue ($a=1,$b=2){ return $a+$b; } echo simu ...
- Andriod - 创建自定义控件
控件和布局的继承结构: 可以看到,我们所用的所有控件都是直接或间接继承自 View的,所用的所有布局都是直接或间接继承自 ViewGroup 的.View 是 Android 中一种最基本的 UI 组 ...
- CodeIgniter框架——nginx下的配置
odeigniter(CI)是一个轻量型的PHP优秀框架,但是它是在apache服务器下开发的,在nginx下需要特别的配置才可以使用. 对nginx的配置如下: server { listen 80 ...
- CodeIgniter框架——源码分析之Config.php
CI框架的配置信息被存储在$config数组中,我们可以添加自己的配置信息或配置文件到$config中: $this->config->load('filename'); //加载配置文件 ...
- Avoiding Full Table Scans
w MySQL :: MySQL 5.7 Reference Manual :: 9.2.1.19 Avoiding Full Table Scanshttps://dev.mysql.com/doc ...
- python系列四:Python3字符串
#!/usr/bin/python #Python3 字符串#可以截取字符串的一部分并与其他字段拼接var1 = 'Hello World!'print ("已更新字符串 : ", ...
- PS导出@3x、@2x、@1x格式的iOS切图神器-Retinize
Retinize动作下载地址:http://retinize.it/ 使用:ps-载入动作-选中图片-执行动作