块级标签使用 display:inline-block;显示一行,存在多余的边距的bug解决办法

解决办法:

在父元素中使用:font-size:0;即可以解决
实例:

<template>
    <div class="home-page">
        <ul class="navigator">
            <li>推荐</li>
            <li>课程</li>
            <li>实践</li>
            <li>职业路径</li>
            <li><img src="../assets/history.png" alt="历史"></li>
            <li><img src="../assets/search.png" alt="搜索"></li>
        </ul>
    </div>
</template>
<style>
    .navigator{
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
        font-size: 0px;
    }
    .navigator li{
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #71777D;
        letter-spacing: 0;
        line-height: 18px;
        display: inline-block;
        margin-right: 20px;
    }
    .navigator li:nth-child(4){
        margin-right: 65px;
    }
    .navigator li>img{
        display: inline-block;
        width: 18px;
        height: 18px;
    }
</style>

 

posted @ 2020-03-18 08:10  最好的安排  阅读(567)  评论(0编辑  收藏  举报

Knowledge is infinite