• 将display设置为inline-block之后产生间隙然后换行问题的解决方法


    在我们会用display的时候,inline-block肯定不陌生吧,我今天在做项目的时候,用了inline-block,使a标签可以自定义宽度,但是随之而来的问题就是换行的BUG,如下图

    特地加了一个border来看其间距,果不其然,会产生一定的间隙

    解决方法1:浮动

    没有什么是浮动解决不了的,如果有的话,那就用两次,在每个a标签上加个float:left,完美解决

    解决方法2:父级元素font-size:0

    这个方法比较偏一点,也是今天从我们老大那里刚刚得知的,css果然许多学问,

    html{
      -webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
    }
    父级元素{
    font-size:0;/* 所有浏览器 */
    *word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
    }
    子元素{
    font-size: 12px;
    letter-spacing: normal;/* 设置字母、字间距为0 */
    word-spacing: normal; /* 设置单词、字段间距为0 */
    }
    

      完美解决!

  • 相关阅读:
    Java 学习使用常见的开源连接池
    Java 数据库操作
    Java 集合的简单理解
    windows中在vs code终端使用bash
    敏捷开发、DevOps相关书籍——书单
    使用Dockerfile来构建镜像
    Redis集群搭建
    使用redis限制ip访问次数
    NFS服务器搭建
    ssh 中 远程文件传输
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/7477248.html
Copyright © 2020-2023  润新知