html复选框多行排列布局
生活随笔
收集整理的這篇文章主要介紹了
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复选框多行排列布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Yii中缓存依赖的处理
- 下一篇： 指数哥伦布编码