<!DOCTYPE html><html><head> <title>京东商品展示</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 360px; height: 360px; margin: auto auto; border: none; } .main .buttom{ border: none; } .main .buttom ul{ list-style: none; } .main .buttom li{ width: 90px; height: 70px; display: inline-block; } .main .buttom img{ margin-left: 10px; } </style></head><body> <div class="main"> <div class="top"> <img src="images/02big.jpg"> </div> <div class="buttom"> <ul> <li><img src="images/02.jpg"></li> <li><img src="images/03.jpg"></li> <li><img src="images/04.jpg"></li> <li><img src="images/05.jpg"></li> </ul> </div> </div></body></html>为什么上下之间有空隙。然后父元素是360px；我设置li的宽度为90px为什么不能在同一行显示图片
1 回答
_蛰伏
TA贡献4条经验 获得超0个赞
大的盒子的width:360;但是 .main .buttom img {margin-left：10px;} 外边距是10个像素，所以li的宽度大于360px;所以掉下来了
实际盒子的宽度：90*4+4*10=400
解决的方法，1、可以减少 li的宽度 80*4+4*10=360
2、不添加 img的外边距 90*4 = 360
楼主可以好好理解一下盒子模型，对内外边距理解的清楚一点，就很好掌握了
- 1 回答
- 0 关注
- 831 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消