html复选框多行排列布局

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

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

　　左边的树和右边的按钮的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>

　　效果图：

　　两个比较了一下，就是在每一组checkbox外面加了一个Div，这个div有自动换行的作用。这样就保持了分行后左边的边距都是一样的，风格都统一了。

转载于:https://www.cnblogs.com/renzaijianghu/p/3567580.html

html复选框多行排列布局相关推荐

PyQt5 技巧篇-复选框绑定行内容，全选、清空、展示选中的内容功能实现演示，设置复选框选中，检查复选框选中状态
先看效果图,选中了几行,然后将选中的内容展示出来. 我设置两个有序序列,分别存储对应的复选框和行内容. 我的行内容是用的 label 标签. # 存储右边label组件的有序列表def get_L_b ...
java设置行显示复选框_java spring cheakbox复选框怎么行或者列删除添加
展开全部你好! 使用原62616964757a686964616fe78988e69d8331333431353366生js实现,还是可以使用其他框架? 我这里有个基于jquery的实现:$(doc ...
html复选框代码隐藏勾勾,[译] 为什么 HTML 中复选框样式难写 — 本文给你答案
在当今世界,大多数网页开发者认为掌握 JavaScript 是优先选择,这理所当然,因为 JS 是浏览器脚本语言 .虽然 HTML 和 CSS 决定网站的样式,但是 JS 凭借它能调用 HTML 和 ...
DataGridView添加复选框并获取选中行的值
示例截图一.加载时为DataGridView控件绑定复选框 //加载代码 private void ShowApp_Load(object sender, EventArgs e) ...
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
GridView既强大又好用.为了让它更强大.更好用,我们来写一个继承自GridView的控件. [索引页] [×××] 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式作者:w ...
web前端——让人头疼的多列复选框排列解决办法
为大多的复选框组或单选按钮组创建两列的布局有点复杂.标签只能用于各个元素,而不能用于元素组.理想情况下,我们将整个组在一个fieldset中,并且使用legend作为这个组的标签.不幸的是,由于浏览器 ...
html表格中插入单行文本框,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...
问题: 1.添加数据后下拉框中未显示带入的数据 2.不可以重复添加相同的数据 3.复选框选中单行或多行以后点击按钮禁用对于行的input 大神们帮忙看看怎么解决啊. Title v-model=&q ...
在DataGrid中选择,确认,删除多行复选框列表
在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid ...
[Ext JS] Grid 的复选框行选择之——某些行不能选取
Grid的选择功能的实现要求如下: 使用复选框(Checkbox) 对Grid进行选择. 某些行根据改行的数据的条件进行是否可以选取. 需要有全选和全部反选的功能. 实现后的效果如下: 实现方案 Gr ...

html复选框多行排列布局

html复选框多行排列布局相关推荐

最新文章

热门文章