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

老白 1年前 482浏览 0评论

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

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

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


布局如下:
display:inline-block替代float后产生间隔4px的终极解决办法 CSS学习 第1张
样式:
display:inline-block替代float后产生间隔4px的终极解决办法 CSS学习 第2张
效果图:
display:inline-block替代float后产生间隔4px的终极解决办法 CSS学习 第3张
经高手的指点,在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari
display:inline-block替代float后产生间隔4px的终极解决办法 CSS学习 第4张
效果如下:完美解决间隔的问题,实现无缝连接

display:inline-block替代float后产生间隔4px的终极解决办法 CSS学习 第5张

发表评论