html复选框多行排列布局
前言：写这篇文章，主要是在于总结一下自己的心得体会。。。
公司的产品需要实现操作权限配置，我们实现的方式是，左边是“产品”=》“模块”树，右边是由“菜单”和“按钮”复选框按钮。如下图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhcAAABlCAIAAABxzlb8AAAJRklEQVR4nO3dzW7iShCG4VxwLgoQjvgZBDtYoXMBLFknm0RCA74BbziLOWdE3NXV5fJ/eJ8FSqBtl9vd/WFmhnm5AwDg9dJ3AQCAERtiiry8CFWJTzbVzLhVpZYA8AxaXBOLojgcDpvNZhdYr9f7/b4oCrmmGilibBm28W0FAE+uxWVxu92ez+c84nQ67XY7uabgRqFEf1UkHsLY3r5bAHg2La6Dq9Xqer3ebrfY43q9Fgr6vr6Xnr8bPoxKLu5VV/9Ye1IEANpNka+vr8/Pz9jjarUSCvqeHMmbgEp3FeEhLLgXAYCYFtfBt7e39/f3j4+P2GOWZeVqIvcfd++9iPhqMqiUHVqeB4Dn0eI6mGXZu0pPkccflFVeuVEQN3HcQ3AvAgAxiXXw1SzctmqKvPz/2dTjr6VXhROoci9SOoRRpXsRe48BQJcqrXsVVkj95dfX139swm0d9yJ36U/Xk/ciYhvxLqT0Q2zDsCT7vYixuwCgY/pq72ZKEd+u66SI/nPY3tLS3sDYnk+0AIxCnZU8qcUUmU6neorMZjOhIFeKlH7QN6yz+pMcAEZnxClyPB5jEXI8HieTiVDQw71Fpc+pwm3vkUW/6ida4lFivwLA0Iw1RS6Xy2KxmM/nWWA6nS6Xy8vlIhRU5U/X9T/2sHwSpd+piLuyHwgAhmCsKVIURZ7nvyPyPBe/R8v+wdQ9tcontxIbJFPE+CoADMRYU8Sn9EmU8olW7J4gvIlRbmuUT7TE/SQ/+wKAoXm6FKmzOlu2td+LAMAP8FwpAgBoFikCAPAjRQAAfqQIAMCPFAEA+JEiAAA/UgQA4EeKAAD8SBEAgN+TpojjX5gP/5+dKxUOv/hHyWr7Op3637g8hAvhK7uX7+Zhno7C6FOkKIrD4bDZbHaB9Xq93+/1r2UMf41dyI4nj/7NWuLPltGZ3LOdo+dLR4wVIFYrNvDxjZnwuN2niLtyew1NDY9GKmeeNn4h2jD6FNlut+fzOY84nU673U6obCTvIo0Dzt5YbOY7NUfPl0qNVa6fWmnbbioXy1DWDvGl+kPI1+cWykEbGfnM077maQdGnyKr1ep6vd5ut9jjer0WKktlvuUS2uehQl+M9A2VU9CLtx9F4ej50kSKTbDYrz1WHh5O/1V8qery3VTlpUrCXg2b6SrVXKdyvessQz3c1lG8WIByRPsp6MXbj9Kvn5AiX6rVaiVUFn+TGzaIXftmr3Fpb8apm6whtoeX2u/oHT1f6rqwJ8XnxQ6PPdNS5aVikoXFNuyl8tIRjWXXqbOpypmn9edpB0afIlmW6f8Be5Zl32qSrrqyQDxuGPtBbF+VvreaEz42cM3VCar2/D3oOkuKhC+F167qifgqFw9nObo4onyd76hcrFl5ya7VypmnlfbZr6dLkf8qk4ZauGYlNwlfdRP3ptT5uKglJ3n46+PmvoK7SZGwePGZVisXl63SaNGXhvBEfKfgW4vDemIVJlu6MU/7mqcdIEUSd8rKJrHxZCfuP3ksS3ul+OTMNKr/7jLsjcdH5bxqzqg6Yybsq1jfhhda3KqDysN6YoMwPN+mME/1ZmJ5sZrFbXtEilhnl3F0urU9OvU9OHR2L3JXL5PjLGqmyOMzyeUg9qSv8+ukSNXnm+rtOpUzT5XGw/HsKWI30tEZTramloaOUyR27t1UXqot7NLYmSo76azye+Sixy69UmRfKWLHPO3e6FNkOp3qo3M2mwmVVb9agx2dlmHa7Irwh6PnHSlSWrvFZh1Urhy0Ut/2UnmyHvEZe+q0VznzNPbkoPyEFDkej7GheTweJ5OJUNnDKKy6LrQ3OmOLpl5kjylStecdKaI0c5+Ce8zcg962dLjlWrRa+f1hdOkLcXJI10kR5qn+ZKw8UqT1Y18ul8ViMZ/Ps8B0Ol0ul5fL5VtNweRJTq27YQS4r3TsiHdpjFpe1VcH42piUbXn70HXJedSrIdr9ryj8lLN4RCKNRZPzT1afJUrR1QqaWqc+Cpnnjbb/60afYoURZHn+e+IPM/Fb3NSfk0+E7vS7lNQhqZej/2gyUM4uHv+b3eJ81x8XrlkjrNwVB47kLKyGEdRB5X7NDtmmKeNHGKYRp8i9SUDv7SWiUtbs1favgAp71keqx3C6BR7VezSWHiEDboU1q+UUXXJa4k+PPTl1disM8liLKOo2fr1a/oyznnqQIpUGApi4w7qqXnoxndYn7GHBzWpHlelqjUM8BIkDarzxUMzTweCFAEA+JEiAAA/UgQA4EeKAAD8SBEAgN+Tpoj+F4GG9rdTjJQKh188gJEafYoURXE4HDabzS6wXq/3+73lX5BZ/kZ5lwtx8q/qiz9bUiS5ZwCoZPQpst1uz+dzHnE6nXa7nVBZ9XWzl6XWGAz2xmIzUgSA2+hTZLVa3W636/Uae/z165dQWeq9uWWpbeTtvPGGo+op6MXbjwIAup+QIp+fn19fX7HH1WolVJb6dgTLGt3sWlzaWzIYjDXE9vDS31eJAPhJRp8iWZZ9fHy8v7/HHt/e3r7VJK3OscfShrEfxPZV6Xuz7F9pEwsYc3UAIPsJKRL7Twv+MP5/zsp9hrJJ+Kpb7E4oVufftIuJ7fzvVo8/AIAPKZL4REvZJLbu24n7Tx7L0l4pPpmgAGBHipiW+Ls5RdzaThF9DwDg8+wpYjfSFAlD0RKZAGA0+hSZTqd6isxmM6Gy6qvqYFPEEif6GQGA209IkePxGIuQ4/E4mUyEyh7SwvhRTwcpUipJ3z8pAmAIRp8il8tlsVjM5/MsMJ1Ol8vl5XL5VpPrE57kSu1ekZN3P7E9KxEY7vCx5hhf/QCe3OhTpCiKPM9/R+R5Hn6PVvJ9uj1FGlmFkzcKsXrsB+VeBEBLRp8i9SXfmJduPpq9F4mVpDyTvJF6PAslb0gRAPWRIhWWbLFxB/XUPHTjOwSAv0gRAIAfKQIA8CNFAAB+pAgAwI8UAQD4kSIAAD9SBADgR4oAAPxIEQCAHykCAPAjRQAAfqQIAMCPFAEA+PWfIq8AgDHrOUUAAGPXT4oAAKAgRQAAfqQIAMCPFAEA+JEiAAA/UgQA4EeKAAD8SBEAgB8pAgDwI0UAAH6kCADAjxQBAPiRIgAAP1IEAOBHigAA/EgRAIAfKQIA8CNFAAB+pAgAwI8UAQD4kSIAAD9SBADg9y9jF+j6nY2kogAAAABJRU5ErkJggg==" alt="" />
左边的树和右边的按钮的ID数据都是配置文件里面配置的，可以多也可以少。
因为我们的树是公司封装的控件，右边的功能无法使用公司控件实现，只能自己写普通控件实现。之前一个同事写好了这个页面，他用的是几个div+普通控件，通过控制div的z-index来显示，我在给它套后台功能的时候，很多方面做的不尽人意。如上图的“健康信息”就是一个div包含的，遮住了下面那个大的黑线框。
后来有一个同事在网上学习，看到了一个效果，就是如上图的效果，很自然，而且里面的复选框和文字之间的间距很好控制，都是写好css固定变化的。这个效果使用的是html5里面的控件做的，于是，我就决定改掉我之前写的代码。通过跟项目经理沟通后，他也同意了，于是就有了如下的模拟代码：
html布局复选框
<!DOCTYPE HTML>
<html> <body> <form>
<div style="float:left;width:500px;height:100%;">
<fieldset>
<legend><input type="checkbox" />健康信息</legend>
<div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />增加一项选择</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />删除</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />修改</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />查看</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />增加一项选择</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />增加一项选择</div> </fieldset>
</div>
</form>
</body>
</html>
上面的代码是比较完整的，可以得到上面的效果，原来的代码是这样的：
html布局复选框
<!DOCTYPE HTML>
<html> <body> <form>
<div style="float:left;width:500px;">
<fieldset>
<legend><input type="checkbox" />健康信息</legend>
<input type="checkbox" style="margin-bottom:5px;" />增加一项选择 <input type="checkbox" style="margin-bottom:5px;" />删除 <input type="checkbox" style="margin-bottom:5px;" />修改><input type="checkbox" style="margin-bottom:5px;" />查看<input type="checkbox" style="margin-bottom:5px;" />增加一项选择 XXXXXXXXXXXXXX <input type="checkbox" style="margin-bottom:5px;" />增 加一项选择 </fieldset>
</div>
</form>
</body>
</html>
效果图：
aaarticlea/png;base64,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" alt="" />
两个比较了一下，就是在每一组checkbox外面加了一个Div，这个div有自动换行的作用。这样就保持了分行后左边的边距都是一样的，风格都统一了。
html复选框多行排列布局的更多相关文章
- jquery实现表格复选框---多行选择问题(php变量)
1.html多选框标签行 表头的多选框,用于全选,取消全选 <th><input id='allSelected' type="checkbox">< ...
- Android布局——单复选框（今天上课的内容总结下）
怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...
- 自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
- extjs grid 复选框选择事件
开发中需求是统计选择的行数,所以要监控checkbox的选择事件包括表头的全选事件 遇到的问题就不赘述了 方案是监控grid的复选框和行加载时绑定事件 baseView: DBEN.controls. ...
- easy ui datagrid 让某行复选框不能选中
//百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历 if (data.rows.length > ...
- sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...
- Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）
一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- extjs 点击复选框在表格中增加相关信息行
功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 va ...
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
随机推荐
- Java NIO原理及实例
Java NIO是在jdk1.4开始使用的,它既可以说成“新I/O”,也可以说成非阻塞式I/O.下面是java NIO的工作原理: 1. 由一个专门的线程来处理所有的 IO 事件,并负责分发. 2. ...
- java中计时器的用法Timer和TimerTask的用法__java中利用Timer与TImerTask 计时器间隔执行任务
经常我们都会有这样的需求,要固定的每隔一段时间执行某一个任务.比如: 我们做一个缓存来减少与数据库的交互,而为了使缓存与数据库中的数据尽量达到同步,需要每个固定的一段时间去数据库中的数 ...
- linux内核驱动中_IO, _IOR, _IOW, _IOWR 宏的用法与解析
在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值.cmd除了可区别数字外,还包含有助于处理的几种相应信息. cmd的大小为 32位,共分 4 个 ...
- ArcGIS_系列视频教程::精品大放送
转自:http://www.cnblogs.com/gispeng/archive/2008/11/28/1342758.html ArcGIS_系列视频教程::精品大放送 文件名: ArcG ...
- extjs form 取值 赋值 重置
一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...
- 用户故事（User Story）
摘要: 一件用户通过系统完成他一个有价值的目标(买一罐饮料)的事.这样的过程就叫“用户案例(user case)”或者“用户故事(user story)”.本文描述了敏捷开发的技巧:如何以用户故事管理 ...
- NodeJS with Express 4.x
Express 4.x 静态资源目录设置: //静态文件目录 app.use('/public', express.static(__dirname+'/public')); app.use('/da ...
- HDU 1078 FatMouse and Cheese (记忆化搜索+dp)
详见代码 #include <iostream> #include <cstdio> #include <cstdlib> #include <memory. ...
- 一步一步写一个简单通用的makefile(四)--写一个通用的makefile编译android可执行文件
通常要把我们自己的的代码编译成在android里面编译的可执行文件,我们通常是建一个文件夹 . ├── Android.mk ├── Application.mk ├── convolve.cl ├─ ...
- 【问题】Win7 系统下 Firefox hostadmin插件无法修改Host
今天遇到一个奇葩问题:win 7系统,firefox hostAdmin插件无法修改Host了,提示“ write hosts file failed check permissions”,肯定是哪里 ...