最近在學模板的時候,特別是在使用ul li列表的時候,偶爾也會用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
效果如下:完美解決間隔的問題,實現無縫連接