前言：写这篇文章，主要是在于总结一下自己的心得体会。。。
公司的产品需要实现操作权限配置，我们实现的方式是，左边是“产品”=》“模块”树，右边是由“菜单”和“按钮”复选框按钮。如下图：
左边的树和右边的按钮的ID数据都是配置文件里面配置的，可以多也可以少。
因为我们的树是公司封装的控件，右边的功能无法使用公司控件实现，只能自己写普通控件实现。之前一个同事写好了这个页面，他用的是几个div+普通控件，通过控制div的z-index来显示，我在给它套后台功能的时候，很多方面做的不尽人意。如上图的“健康信息”就是一个div包含的，遮住了下面那个大的黑线框。
后来有一个同事在网上学习，看到了一个效果，就是如上图的效果，很自然，而且里面的复选框和文字之间的间距很好控制，都是写好css固定变化的。这个效果使用的是html5里面的控件做的，于是，我就决定改掉我之前写的代码。通过跟项目经理沟通后，他也同意了，于是就有了如下的模拟代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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> |
上面的代码是比较完整的，可以得到上面的效果，原来的代码是这样的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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有自动换行的作用。这样就保持了分行后左边的边距都是一样的，风格都统一了。