• inline-block元素之间空白间距的解决办法


         有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用 inline-block来实现元素的居中效果。但是inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。关于这个问题,原 来很多人不知道啊。呵呵~其实很简单,当原素被转换为inline-block显示的时候,那么该元素会具有inline的一些属性,所 以当你在标签之间换行的时候会产生空格,inline-block之间的间距就是一个空格的位置,你要算间隙是几个像素,其实依赖于你的字体设置大小,空 格是个字符啊,所以-margin补间距之类的方法不可取,所以大家每个人出来的负值都不一样(-_-!)。空格是由inline-block标签之间换 行产生的,那么解决方法简单了,不要在转换为inline-block的标签的代码之间换行就行了,开发人员一定要在精确布局的时候要注意一下。 inline-block具有inline的一些属性,那么inline标签代码之间换行本来就会有空格产生 的;IE倒是奇怪没有产生空格,但是也讲的通。

    解决方法:

    第一:去掉html标签中的空格和回车;
    例如:

    <ul><li>web前端开发</li><li>前端开发</li><li>前端开发:http://www.css119.com</li></ul>

    第二:改变html标签的结构(下面只展示出了一种,还有其他的类似方法);
    例如:

    <ul>
      <li>WEB前端开发</li
      ><li>前端开发</li
      ><li>前端开发:http://www.css119.com</li>
    </ul>

    第三:利用负margin解决(不推荐,具体负margin多少取决于字体的大小);

    第四:设置父元素font-size:0;子元素重新设置自己的font-size;
    例如:

    ul{font-size:0}
    li{ display:inline-block;*display:inline;*zoom:1;background:green; padding:5px;font-size:12px}

    可以看到在 ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 低版本safari 浏览器下还是有问题。
    关于 低版本safari 浏览器的兼容。
    可以利用letter-space:-N px或者word-spacing:-N px来解决。

  • 相关阅读:
    关于工作中Git相关的总结
    浅谈MySQL的优化
    由内搜推送思考Kafka 的原理
    SOA和微服务架构
    Centos7.2 搭建Lamp服务器以及迁移WordPress个人博客详细过程
    MyISAM和InnoDB索引实现区别
    图解高内聚与低耦合
    图解Java常用数据结构(一)
    Java源码安全审查
    Java高并发之锁优化
  • 原文地址:https://www.cnblogs.com/xuelixiang/p/4808187.html
Copyright © 2020-2023  润新知