凉风有信,秋月无边。
亏我思娇的情绪好比度日如年。

display:inline-block替代float后产生间隔4px的终极解决办法

《display:inline-block替代float后产生间隔4px的终极解决办法》正文开始,本次阅读大概10分钟。

最近在学模板的时候,特别是在使用ulli列表的时候,偶尔也会用display:inline-block替代float使用,但display:inline-block偶一个间隔的问题。

解决办法是百度来的,分享如下:

有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

布局如下:样式:效果图:经高手的指点,在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari效果如下:完美解决间隔的问题,实现无缝连接

赞(44)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的内容,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。本博客资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如果本文导致的版权问题以及内容纠错问题请联系站长QQ:1004619 | 点此给我发送邮件
本文标题:display:inline-block替代float后产生间隔4px的终极解决办法
本文地址:https://www.1004619.com/nn/displayinlineblocktdfloathcsjg.html