<!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 设置浮动后，div的背景颜色没效了。而给li设置display:inline-block的话div的背景颜色却能显示出来
1 回答
已采纳
慕数据5775487
TA贡献76条经验 获得超19个赞
是因为受到浮动影响，li设置浮动后就脱离了正常文档流，相当于DIV2里面没了内容，无法撑开造成的，可以给DIV2也设个高度，你可以F12看一下DIV2的高度是不0？没有高度当然看不到背景颜色了！给li设置display:inline-block的话div的背景颜色却能显示出来是因为li元素没有脱离正常文档流，并且li里面是有内容的，能够撑开DIV2, 因此也就能看到背景颜色了！！
- 1 回答
- 0 关注
- 1263 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消