<!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貢獻76條經(jīng)驗 獲得超19個贊
是因為受到浮動影響，li設(shè)置浮動后就脫離了正常文檔流，相當(dāng)于DIV2里面沒了內(nèi)容，無法撐開造成的，可以給DIV2也設(shè)個高度，你可以F12看一下DIV2的高度是不0？沒有高度當(dāng)然看不到背景顏色了！給li設(shè)置display:inline-block的話div的背景顏色卻能顯示出來是因為li元素沒有脫離正常文檔流，并且li里面是有內(nèi)容的，能夠撐開DIV2,????因此也就能看到背景顏色了?。?/p>
-
慕粉3204329感謝，終于明白了。 -
添加回答
舉報
0/150
提交
取消