DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS怎樣取消兩個塊狀元素之間空隙
CSS怎樣取消兩個塊狀元素之間空隙
編輯:CSS特效代碼     
inline-block元素在布局時會給我們帶來很多方便,但它有一個明顯的bug,就是inline-block元素間會有一個4px的間隙(有的浏覽器可能是8px)。廢話不多說了,直接講解決方法吧。

總體來時可分為兩種方法,一種是改變html結構法,另一種是css法。

先說第一種,比如下面這段代碼:

<ol>
<li>首頁</li>
<li>關於我們</li>
<li>聯系我們</li>
<li>加入我們</li>
</ol>

假設 li 是 inline-block元素,則 li 間會出現討厭的空隙,這時我們可以換個寫法:
<ol>
<li>首頁</li
><li>關於我們</li
><li>聯系我們</li
><li>加入我們</li>
</ol>

<ol>
<li>
首頁</li><li>
關於我們</li><li>
聯系我們</li><li>
加入我們</li>
</ol>

<ol>
<li>首頁</li><!--
--><li>關於我們</li><!--
--><li>聯系我們</li><!--
--><li>加入我們</li>
</ol>
以上三種寫法都是可以的,總之就是避免讓 </li>與<li>之間出現書面上的空格。

還有一種寫法是去除閉合標簽,如:
<ol>
<li>首頁
<li>關於我們
<li>聯系我們
<li>加入我們
</ol>

這種寫法因為不符合html規范,所以還是避免使用為好



第二種是css解決方法。思路是把inline-block元素的父元素的font-size設為0,letter-spacing和word-spacing設為負數,然後再在inline-block元素中把這幾個值恢復正常即可。

ul{
font-size:0;
letter-spacing:-4px; /*實際情況下 -4這個值可能還要調整*/
word-spacing:-4px; /*實際情況下 -4這個值可能還要調整*/
}
ul li{
display:inline-bolck;
zoom:1;
font-size:12px;
letter-spacing:normal;
word-spacing:normal;
}

貌似我還看到過一種js方法,思路大概是通過移除inline-block元素之間的文本節點來實現的,但能用css解決的東西就別動用js啦。

參考:http://hovertree.com/hvtart/bjae/isnqi1t4.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved