老师麻烦看一下,我这样写为什么下边缘会有缝隙?

来源: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;
}

显示效果截图:

http://img.mukewang.com/climg/6018d850087adaed25601286.jpg

写回答

1回答

好帮手慕张

2021-02-02

同学你好,问题解答如下:

1、边缘会有缝隙的原因为:最外面的包裹盒子设置为148px,而里面的li没有设置高度,li的高度由内容撑开为138px,因此会有一些间隙。

2、最外面的盒子的设置的高度为148px;

http://img.mukewang.com/climg/60191c0a091f75e415420847.jpg

3、而li没有设置高度,li的高度是由内容撑起来的,高度为138px;

http://img.mukewang.com/climg/60191c28096554e115110785.jpg

4、如果想要li占满外层包裹盒子的高度,可以给li设置高度为148px(或者把外面包裹盒子设置为138px),如下图:

http://img.mukewang.com/climg/60191c410929d3a015050780.jpg

祝学习愉快!


0

0 学习 · 15276 问题

查看课程