如何解決inline block元素的空白間距

2021-09-27 07:30:54 字數 968 閱讀 4282

有關於使用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倒是奇怪沒有產生空格,但是也講的通。

我們可以看到:在 ie8、chrome、firefox、opera 以及 safari 瀏覽器下,li之間有「空白間隙」。

但是在 ie6 和 ie7 瀏覽器下卻正常顯示。

解決方法:

第一:去掉html標籤中的空格和回車;

第二:改變html標籤的結構(下面只展示出了一種,還有其他的類似方法);

第四:設定父元素font-size:0;子元素重新設定自己的font-size;

ulli可以看到在 ie8,firefox,chrome 和 opera 瀏覽器下已經沒有問題了,但是在 低版本safari 瀏覽器下還是有問題。

關於 低版本safari 瀏覽器的相容。

可以利用letter-space:-n px或者word-spacing:-n px來解決。

如何解決inline block元素的空白間距

有關於使用inline block來代替float的討論也蠻多的,最常說的就是使用inline block來代替float進行布局,或者使用inline block來實現元素的居中效果。前面 css3製作的分頁導航 一文中就是使用的inline block製作的居中效果,不過留下了一上問題,就是使用...

如何解決併發

雖然從巨集觀上,處理器是並行處理多項任務,但本質上乙個處理器在某個時間點只能處理乙個任務,屬於序列執行。在單處理器的情況下,併發問題源於多道程式設計系統的乙個基本特性 程序的相對執行速度不可 它取決於其他程序的活動 作業系統處理中斷的方式以及作業系統的排程策略。在分布式環境下,併發產生的可能性就更大...

如何解決藍屏問題

第一步 公升級筆記本bios 一般說來筆記本在出廠的時候很可能設計上存在某些的瑕疵,而廠商通常會採用公升級bios的方法來解決這些bug。如果我們在使用筆記本腦的過程中遇到了藍屏的情況,那麼我們可以採取公升級bios的辦法來解決藍屏的故障。第二步 正確安裝硬體驅動 在重新整理了bios以後,部分筆記...