html复选框多行排列布局

浏览数：18 / 时间：2015年06月09日

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

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

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