當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html复选框多行排列布局

發(fā)布時(shí)間：2025/7/14 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 html复选框多行排列布局小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　前言：寫這篇文章，主要是在于總結(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复选框多行排列布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。