块级标签使用 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>

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

时间: 2024-08-30 00:43:38

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

ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidScrollView嵌套ListView显示一行高度不正确 1.前言 从谷歌那里找到的ScrollView嵌套ListView只显示一行的解决办法相信很多人都遇到过,然后大部分都是用这位博主的办法解决的吧 刚开始我也是用这个办法解决的,首先感谢这位哥的大私奉献,贴上地址 http://blog.csd

块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>块级标签</title> 5 </head> 6 7 <body> 8 9 块级标签 10 就像标题.段落一样,需要在页面上占据一块的位置的标签. 11 <h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落 12 13 <

css基础 display:block 行内标签转为块级标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

block(块级元素)和 inline(内联元素) 的区别

<td style="word-break:break-all"> 强制换行 <td  style="width:80px;display:block;boverflow: hidden;">超出隐藏,注意要设置宽度. 内联转化为块状:display:block 或 float:left / right 块状转化为内联:display:inline; 但是要注意内联元素是不能设置宽度和高度的.那就要强制把内联元素转换为块级元素了 div这样的

块级标签显示

一. HTML标签一般分为块级标签和行内两张标签,他们也称块元素和行内元素. 1.块级元素(block-level) 没个块级元素都会独自占一行或多行,可以对其设置宽度.宽度.对其等熟悉,常用于网页布局和网页搭建. #常见的块元素有<h1>~<h6><div><p><ol><ul><li>等,其中<div>是最为典型的块元素. * 2.行内元素(inline-level) 行内元素(内联元素)不占有独立的区域,

CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

&lt;p&gt;&lt;/p&gt;标签为什么不能包含块级标签?还有哪些特殊标签?

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v