前言：写这篇文章，主要是在于总结一下自己的心得体会。。。

　　公司的产品需要实现操作权限配置，我们实现的方式是，左边是“产品”=》“模块”树，右边是由“菜单”和“按钮”复选框按钮。如下图：

　　aaarticlea/png;base64,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" 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复选框多行排列布局的更多相关文章

  1. jquery实现表格复选框---多行选择问题(php变量)

    1.html多选框标签行 表头的多选框,用于全选,取消全选 <th><input id='allSelected' type="checkbox">< ...

  2. Android布局——单复选框（今天上课的内容总结下）

    怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...

  3. 自定义实现 PyQt5 下拉复选框 ComboCheckBox

    一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...

  4. extjs grid 复选框选择事件

    开发中需求是统计选择的行数,所以要监控checkbox的选择事件包括表头的全选事件 遇到的问题就不赘述了 方案是监控grid的复选框和行加载时绑定事件 baseView: DBEN.controls. ...

  5. easy ui　datagrid 让某行复选框不能选中

    //百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历             if (data.rows.length > ...

  6. sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突

    gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...

  7. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  8. extjs 点击复选框在表格中增加相关信息行

    功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 va ...

  9. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

随机推荐

  1. 计算几何（凸包模板）：HDU 1392 Surround the Trees

    There are a lot of trees in an area. A peasant wants to buy a rope to surround all these trees. So a ...

  2. 外部exe窗体嵌入winform

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  3. python 零散记录(一) input与raw_input 数学相关函数 转换字符串的方法

    input()与raw_input(): 两者都是接受命令行输入,但区别在于,raw_input()接受原始数据(raw data). #使用input()来提示输入名字 input("en ...

  4. Web---创建Servlet的3种方式、简单的用户注册功能

    说明: 创建Servlet的方式,在上篇博客中,已经用了方式1(实现Servlet接口),接下来本节讲的是另外2种方式. 上篇博客地址:http://blog.csdn.net/qq_26525215 ...

  5. JAVA vo pojo javabean dto的区别

    JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...

  6. [hadoop转载]tearsort

        1TB排序通常用于衡量分布式数据处理框架的数据处理能力.Terasort是Hadoop中的的一个排序作业,在2008年,Hadoop在1TB排序基准评估中赢得第一名,耗时209秒.那么Tera ...

  7. （转载）TRS的WCM6漏洞权限绕过以及绕过密码的登陆方式

    转载于:http://www.2cto.com/Article/201302/191261.html 1.由来:建立在 TRS的WCM6可直接获取管理员密码 漏洞的基础上   2.首先访问wcm目录, ...

  8. PAT 1080. Graduate Admission (30)

    It is said that in 2013, there were about 100 graduate schools ready to proceed over 40,000 applicat ...

  9. Java 线程第三版 第一章Thread导论、 第二章Thread的创建与管理读书笔记

    第一章 Thread导论 为何要用Thread ? 非堵塞I/O      I/O多路技术      轮询(polling)      信号 警告(Alarm)和定时器(Timer) 独立的任务(Ta ...

  10. linux 进程综合指令

    1. 查询当前机器运行的进程总数: ps -ef | wc -l ps -ef | grep httpd | wc -l 2. ulimit命令 表 1. ulimit 参数说明 选项 [option ...