在设置元素宽度时 为什么算好的却不能平铺
<!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为什么不能在同一行显示图片
蓝小胖子浏览 838回答 1
1回答
-
_蛰伏
大的盒子的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楼主可以好好理解一下盒子模型，对内外边距理解的清楚一点，就很好掌握了
随时随地看视频慕课网APP
Html/CSS