码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-18 09:26:25      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:mil   inline   bsp   sse   标签   shadow   temp   fan   spl   

解决办法:

在父元素中使用: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>

 

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

标签:mil   inline   bsp   sse   标签   shadow   temp   fan   spl   

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12515224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!