如何解決inline-block元素的空白間距
轉載自:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
有關於使用inline-block來代替float的討論也蠻多的,最常說的就是使用inline-block來代替float進行布局,或者使用inline-block來實現元素的居中效果。前面《CSS3制作的分頁導航》一文中就是使用的inline-block制作的居中效果,不過留下了一上問題,就是使用inline-block的元素之間會存在“4px”的空白間距。那麽今天我們就一起來說說這個“4px”的問題。著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements ? w3cplus.com
HTML Markup
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS Code
*{
margin: 0;
padding: 0;
}
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
上面的demo效果,明顯的可以看出,在inline-block的元素之間存在“4px”的空白:
上面截圖是:IE8-9、Firefox、Safari等瀏覽器下的效果,換句話說,這種現像只有在這幾種瀏覽器中才會出現。下面我們就來說說解決這個“4px”(Chrome下是8px)的幾種方法:
方法一:改變HTML結構
簡單一點的方法就是就是改變HTML的結構,你可以使用下面幾種方法的任何一種都可以達到效果:
結構一:
<ul>
<li>
item1</li><li>
item2</li><li>
item3</li><li>
item4</li><li>
item5</li>
</ul>
這種方法接近標簽換行格式的寫法,也更趨近閱讀。
結構二:
<ul>
<li>item1</li
><li>item2</li
><li>item3</li
><li>item4</li
><li>item5</li>
</ul>
結構二和結構一幾乎是一樣,結束標簽的“>”成了另一行的起始標簽。
結構三:
<ul>
<li>item1</li><!--
--><li>item2</li><!--
--><li>item3</li><!--
--><li>item4</li><!--
--><li>item5</li>
</ul>
結構三的方法采用的是html的註釋的方法,這種方法我想大家不太常見,不過同樣能解決我們需要解決的問題。
結構四:
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
結構四,我想是大家常用來解決這樣的問題的方法吧,下面我們來看看按上述幾種方法寫的效果:
方法一所說的是通過標簽來解決,雖然問題是解決了,但可以說不能稱作是技巧。而且上面的方法只適合於寫靜態頁面的時候,一旦你的HTML不是自己寫,而是後臺生成,就比如CMS來說,標簽後臺生成,此時,我想大家又要罵街了,這可怎麽辦?其實我們除了上面的方法,還可以使用CSS來解決的。
方法二:負的margin
很多地方討論使用負的margin來解決,比如說:
ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
*margin-right: 0;
}
這種解決方法並不完美,如果你的父元素設置的字號不一樣,可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設置一個負的margin值才能實現同等的效果。
當然有些文章介紹使用"-0.25em"來解決,這也是跟元素的字號有極大的關系。所以我個人建議不使用負的margin來解決這樣的問題。
方法三:設置父元素字體為0
第三種方法設置父元素的字體為“0”,然後在“inline-block”元素上重置字體需要的大小。
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}
這樣處理在Firexfox,chrome等瀏覽器下是達到了效果,可是在Safari下可問題依然存在:
按此來說,方法三也不是絕佳的好方法,用不用大家自己考慮。
方法四:丟失結束標簽
說實在的,這種方法又回到了方法一,在html標簽上動手腳。就是讓“inline-block”元素丟失關閉標簽
<ul>
<li>item1
<li>item2
<li>item3
<li>item4
<li>item5
</ul>
樣式基本不變,我們來看看效果:
這種方法雖然能達到各瀏覽器的兼容,但還是有一個前提,那就是“DOCTYPE”要選擇對,在“XHTML”下可就問題又出來了。
方法五:jquery方法
最後在給大家提供一種jquery的方法:
HTML Markup
<ul class="removeTextNodes">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS Code
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
jQuery Code
$(‘.removeTextNodes‘).contents().filter(function() {
return this.nodeType === 3;
}).remove();
最後一種方法是通過jQuery來改變“nodeType”的值,從而實現我們需要的效果。
上面講述了多種方法,但要兼容多個瀏覽器版本,並不每種方法實用,以前常用的方法,這次測試並不兼容所有瀏覽器。要做到兼容所有瀏覽器,個人認為還是在html的標簽上做一定的處理,或者采用最後一種方法,通過“jQuery”來改變“nodeType”值達到效果。針對這個“inline-block”之間的間距有幾篇文章做過介紹,但裏面的方法,和上面介紹的測試的基本一樣,具體如何運用,大家還是根據自己的需求進行選擇或處理。
擴展閱讀:
- Fighting the Space Between Inline Block Elements
- display: inline-block et les espaces indésirables
- 去除inline-block元素間間距的N種方法
那麽有關於“inline-block”的間距如何去除,今天就扯到這了,希望這篇文章對喜歡用inline-block的童鞋有所幫助。如果您有更好的方法,記得與我們一起分享,歡迎在下面的評論中留下您的經驗,或者指正上面的不對之處。
更新:全兼容的樣式解決方法
經過高人指點,使用純CSS還是找到了兼容的方法,就是在父元素中設置font-size:0,用來兼容chrome,而使用letter-space:-N px來兼容safari:
.finally-solve {
letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
如需轉載煩請註明出處:W3CPLUS
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements ? w3cplus.com
如何解決inline-block元素的空白間距