前言：寫這篇文章，主要是在於總結一下自己的心得體會。。。
公司的產品需要實現操作權限配置，我們實現的方式是，左邊是“產品”=》“模塊”樹，右邊是由“菜單”和“按鈕”復選框按鈕。如下圖：
左邊的樹和右邊的按鈕的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有自動換行的作用。這樣就保持了分行后左邊的邊距都是一樣的，風格都統一了。