老师麻烦看一下,我这样写为什么下边缘会有缝隙?
来源:4-7 小慕医生项目开发(5)
嘉左布衣
2021-02-02 12:43:25
HTML代码:
<div class="useful-links">
<ul>
<li>
<a href="">
<img src="images/icon_jzxz.png">
<span>就诊须知</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jylc.png">
<span>就医流程</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_zjjs.png">
<span>专家介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ksjs.png">
<span>科室介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ybjy.png">
<span>医保就医</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jktj.png">
<span>健康体检</span>
</a>
</li>
</ul>
</div>
CSS代码:
.content .useful-links{
width: 906px;
height: 148px;
margin: 0 auto;
background-color: orange;
}
.content .useful-links ul li{
width: 106px;
float: left;
margin-right: 54px;
}
.content .useful-links ul li span{
display: block;
text-align: center;
}
.content .useful-links ul li:last-child{
margin-right: 0;
}
显示效果截图:
1回答
同学你好,问题解答如下:
1、边缘会有缝隙的原因为:最外面的包裹盒子设置为148px,而里面的li没有设置高度,li的高度由内容撑开为138px,因此会有一些间隙。
2、最外面的盒子的设置的高度为148px;
3、而li没有设置高度,li的高度是由内容撑起来的,高度为138px;
4、如果想要li占满外层包裹盒子的高度,可以给li设置高度为148px(或者把外面包裹盒子设置为138px),如下图:
祝学习愉快!
相似问题