html复选框多行排列布局
前言：寫這篇文章，主要是在于總結(jié)一下自己的心得體會(huì)。。。
公司的產(chǎn)品需要實(shí)現(xiàn)操作權(quán)限配置，我們實(shí)現(xiàn)的方式是，左邊是“產(chǎn)品”=》“模塊”樹，右邊是由“菜單”和“按鈕”復(fù)選框按鈕。如下圖：
左邊的樹和右邊的按鈕的ID數(shù)據(jù)都是配置文件里面配置的，可以多也可以少。
因?yàn)槲覀兊臉涫枪痉庋b的控件，右邊的功能無法使用公司控件實(shí)現(xiàn)，只能自己寫普通控件實(shí)現(xiàn)。之前一個(gè)同事寫好了這個(gè)頁面，他用的是幾個(gè)div+普通控件，通過控制div的z-index來顯示，我在給它套后臺(tái)功能的時(shí)候，很多方面做的不盡人意。如上圖的“健康信息”就是一個(gè)div包含的，遮住了下面那個(gè)大的黑線框。
后來有一個(gè)同事在網(wǎng)上學(xué)習(xí)，看到了一個(gè)效果，就是如上圖的效果，很自然，而且里面的復(fù)選框和文字之間的間距很好控制，都是寫好css固定變化的。這個(gè)效果使用的是html5里面的控件做的，于是，我就決定改掉我之前寫的代碼。通過跟項(xiàng)目經(jīng)理溝通后，他也同意了，于是就有了如下的模擬代碼：
html布局復(fù)選框 <!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;" />增加一項(xiàng)選擇</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;" />增加一項(xiàng)選擇</div><div style="float:left;padding:0 5px;"><input type="checkbox" style="margin-bottom:5px;" />增加一項(xiàng)選擇</div></fieldset> </div> </form> </body> </html>
?
上面的代碼是比較完整的，可以得到上面的效果，原來的代碼是這樣的：
html布局復(fù)選框 <!DOCTYPE HTML> <html><body><form> <div style="float:left;width:500px;"><fieldset><legend><input type="checkbox" />健康信息</legend><input type="checkbox" style="margin-bottom:5px;" />增加一項(xiàng)選擇 <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;" />增加一項(xiàng)選擇XXXXXXXXXXXXXX <input type="checkbox" style="margin-bottom:5px;" />增加一項(xiàng)選擇</fieldset> </div> </form> </body> </html>
?
效果圖：
兩個(gè)比較了一下，就是在每一組checkbox外面加了一個(gè)Div，這個(gè)div有自動(dòng)換行的作用。這樣就保持了分行后左邊的邊距都是一樣的，風(fēng)格都統(tǒng)一了。
?
轉(zhuǎn)載于:https://www.cnblogs.com/renzaijianghu/p/3567580.html
總結(jié)
以上是生活随笔為你收集整理的html复选框多行排列布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Yii中缓存依赖的处理
- 下一篇： 指数哥伦布编码