<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <style type="text/css"> .div1{ width: 100%; height: 300px; } .div2{ margin: 0 auto; width: 600px; background: #ccc; } .div2 li{ float: left; } </style></head><body><div class="div1"> <div class="div2"> <ul> <li>huiche</li> <li>huiche</li> <li>huiche</li> <li>huiche</li> </ul> </div></div></body></html>為什么給 li 設(shè)置浮動后，div的背景顏色沒效了。而給li設(shè)置display:inline-block的話div的背景顏色卻能顯示出來
1 回答
已采納
慕數(shù)據(jù)5775487
TA貢獻(xiàn)76條經(jīng)驗(yàn) 獲得超19個(gè)贊
是因?yàn)槭艿礁佑绊懀琹i設(shè)置浮動后就脫離了正常文檔流，相當(dāng)于DIV2里面沒了內(nèi)容，無法撐開造成的，可以給DIV2也設(shè)個(gè)高度，你可以F12看一下DIV2的高度是不0？沒有高度當(dāng)然看不到背景顏色了！給li設(shè)置display:inline-block的話div的背景顏色卻能顯示出來是因?yàn)閘i元素沒有脫離正常文檔流，并且li里面是有內(nèi)容的，能夠撐開DIV2,????因此也就能看到背景顏色了??！
-
慕粉3204329感謝，終于明白了。 -
添加回答
舉報(bào)
0/150
提交
取消