新增标签未顶格显示（子盒子内容超出父盒子引起的bug）

问题描述

新的一行的ul没有顶格

代码

        <div class="goods-hd">
            <h3>新鲜好物
                <span>新鲜出炉 品质靠谱span>
            h3>
            <a href="#" class="all">查看全部 > a>
        div>
        <div class="goods-list">
            <ul>
                <li>
                    <a href="#">
                        <img src="" alt="">
                        <h4>睿米无线吸尘器F8h4>
                        <p>¥<span>899span>p>
                    a>
                li>
            ul>
        div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

原因

上面的父盒子goods-hd高度为114px

但是h3标签的高度却为118.57px，超出了父盒子的高度，故新建的ul标签里的内容没有顶格呈现，而是后移了h3标签的宽度。

解决办法

方法一：直接给h3标签加高度
方法二：给父盒子添加overflow:hidden；属性，使得子盒子内容不得超过父盒子

.goods-hd {
    /* 不允许子盒子超过父盒子 */
    /* 多余的部分切掉就不影响下面盒子 */
    overflow: hidden;
    height: 114px;
    line-height: 114px;
}
1
2
3
4
5
6
7

修改后效果：