本文介绍如何利用HTML5实现复选框的多行排列布局，以适应前端界面设计需求。通过添加带有自动换行样式的Div，使得复选框在保持左侧边距一致的同时，达到美观且统一的风格，适用于权限配置等场景。
前言：写这篇文章，主要是在于总结一下自己的心得体会。。。
公司的产品需要实现操作权限配置，我们实现的方式是，左边是“产品”=》“模块”树，右边是由“菜单”和“按钮”复选框按钮。如下图：
左边的树和右边的按钮的ID数据都是配置文件里面配置的，可以多也可以少。
因为我们的树是公司封装的控件，右边的功能无法使用公司控件实现，只能自己写普通控件实现。之前一个同事写好了这个页面，他用的是几个div+普通控件，通过控制div的z-index来显示，我在给它套后台功能的时候，很多方面做的不尽人意。如上图的“健康信息”就是一个div包含的，遮住了下面那个大的黑线框。
后来有一个同事在网上学习，看到了一个效果，就是如上图的效果，很自然，而且里面的复选框和文字之间的间距很好控制，都是写好css固定变化的。这个效果使用的是html5里面的控件做的，于是，我就决定改掉我之前写的代码。通过跟项目经理沟通后，他也同意了，于是就有了如下的模拟代码：
html布局复选框
<!DOCTYPE HTML>
<html>
<body>
<form>
<div style="float:left;w
最低0.47元/天 解锁文章
扫一扫
2358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
