css小知识---input输入块
2024-09-04 15:48:04
对于如下的界面,介绍一种实现方式。
可以将整个界面分为三块,左中右。通过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>
最新文章
- swift---不同字体大小不同颜色label富文本设置
- CentOS7 网络管理相关命令
- 【洛谷P3398】仓鼠找sugar
- Android学习笔记之使用百度地图实现路线规划+公交信息检索
- activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建
- 处理XML的几种方式
- Log.i()的用法
- python学习笔记20(字符串格式化)
- xdebug及webgrind的联用
- MyBatis之TypeHandler
- [Awson原创]修水渠(canal)
- POJ1321 棋盘问题(简单搜索)
- amazeUI的confirm控件记录缓存问题的解决办法
- logstash数据处理示例
- Sublime Text 3中文乱码问题解决(最新)
- PYQT实现简单的浏览器功能
- android Thread
- nw 注册快捷键
- python爬虫之数据的三种解析方式
- Spring MVC的handlermapping之请求分发如何找到正确的Handler(BeanNameUrlHandlerMapping,SimpleUrlHandlerMapping)
热门文章
- Modification of UCT with Patterns in Monte-Carlo Go(论文阅读)
- 阿里云服务器 端口开放问题 浏览器钟输入ip 访问服务器
- DWR相关知识
- NIPS2016 best paper: Value Iteration Networks 解析
- JSP接口浅析
- _DataStructure_C_Impl:SeqListBasedSort
- 继续聊WPF——动态数据模板
- ubuntu环境初始化
- hdu5646(数学)
- 《从零开始学Swift》学习笔记(Day 11)——数据类型那些事儿?