有關(guān)于使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進(jìn)行布局，或者使用inline-block來實(shí)現(xiàn)元素的居中效果。前面《CSS3制作的分頁導(dǎo)航》一文中就是使用的inline-block制作的居中效果，不過留下了一上問題，就是使用inline-block的元素之間會存在“4px”的空白間距。那么今天我們就一起來說說這個(gè)“4px”的問題。

HTML Markup

上面截圖是：IE8-9、Firefox、Safari等瀏覽器下的效果，換句話說，這種現(xiàn)像只有在這幾種瀏覽器中才會出現(xiàn)。下面我們就來說說解決這個(gè)“4px”(Chrome下是8px)的幾種方法：

簡單一點(diǎn)的方法就是就是改變HTML的結(jié)構(gòu)，你可以使用下面幾種方法的任何一種都可以達(dá)到效果：

結(jié)構(gòu)一：

結(jié)構(gòu)二：

結(jié)構(gòu)二和結(jié)構(gòu)一幾乎是一樣，結(jié)束標(biāo)簽的“>”成了另一行的起始標(biāo)簽。

結(jié)構(gòu)三：

結(jié)構(gòu)三的方法采用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。