使用font-size:0px 來(lái)制作跨瀏覽器的inline-block css屬性
發(fā)布時(shí)間:2011-07-29 17:18:38 作者:佚名
我要評(píng)論

像下面圖中的布局,如果排列的元素是登高的話,相信很多人都會(huì)使用浮動(dòng)來(lái)布局,不過(guò)如果元素不等高的話,不添加多余的標(biāo)簽,浮動(dòng)布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種情況,可以使用inline-block來(lái)布局。
像下面圖中的布局,如果排列的元素是登高的話,相信很多人都會(huì)使用浮動(dòng)來(lái)布局,不過(guò)如果元素不等高的話,不添加多余的標(biāo)簽,浮動(dòng)布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種情況,可以使用inline-block來(lái)布局。
現(xiàn)代瀏覽器的最新版都支持inline-block,只有該死的ie6、7不支持inline-block,但ie6、7可以通過(guò) display:inline;zoom:1;來(lái)模擬。
下面是inline-block兼容的代碼:
display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;
但是大家有沒(méi)有發(fā)現(xiàn),在firefox,safari,opera,ie8+中的 inline-block 元素之間會(huì)莫名其妙多出3px的間距,其實(shí)這個(gè)是換行符,如果將 inline-block 元素間的換行符去掉,這3px的間距就會(huì)消失了。
有沒(méi)有在不影響代碼美觀的情況下去掉間距尼,答案是有的??梢栽趇nline-block的父元素中加上 font-size:0;然后在 inline-block講字體設(shè)回來(lái)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;}
view sourceprint? .box{margin-top:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>寫(xiě)成一行的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<h1>有換行符的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
<h1>父級(jí)使用了font-size:0的 line-block</h1>
<ul class="font0">
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box font0">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
</body>
</html>
現(xiàn)代瀏覽器的最新版都支持inline-block,只有該死的ie6、7不支持inline-block,但ie6、7可以通過(guò) display:inline;zoom:1;來(lái)模擬。
下面是inline-block兼容的代碼:
復(fù)制代碼
代碼如下:display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;
但是大家有沒(méi)有發(fā)現(xiàn),在firefox,safari,opera,ie8+中的 inline-block 元素之間會(huì)莫名其妙多出3px的間距,其實(shí)這個(gè)是換行符,如果將 inline-block 元素間的換行符去掉,這3px的間距就會(huì)消失了。
有沒(méi)有在不影響代碼美觀的情況下去掉間距尼,答案是有的??梢栽趇nline-block的父元素中加上 font-size:0;然后在 inline-block講字體設(shè)回來(lái)。
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;}
view sourceprint? .box{margin-top:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>寫(xiě)成一行的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<h1>有換行符的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
<h1>父級(jí)使用了font-size:0的 line-block</h1>
<ul class="font0">
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box font0">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
</body>
</html>
相關(guān)文章
- 這篇文章主要介紹了css幾種解決inline-block間隙的方案(整理),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-16
css解決display:inline-block;產(chǎn)生的縫隙(間隙)的方法
本篇文章主要介紹了css解決display:inline-block;產(chǎn)生的縫隙(間隙)的方法,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-14- 這篇文章主要介紹了兼容瀏覽器的inline-block,需要的朋友可以參考下2016-02-17
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對(duì)使用時(shí)產(chǎn)生的空隙問(wèn)題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09CSS中使用inline-block來(lái)進(jìn)行居中的示例
這篇文章主要介紹了CSS中使用inline-block來(lái)進(jìn)行居中的示例,使用的時(shí)候注意一下容器的寬度,需要的朋友可以參考下2015-07-15- Inline-block是元素display屬性的一個(gè)值,inline-block元素跟元素設(shè)置浮動(dòng)后的表現(xiàn)差別并不是很大,本文有個(gè)不錯(cuò)的示例可以讓大家知道它的具體使用,喜歡的朋友可以了解下2013-09-06
CSS屬性display:inline-block用法深入理解
本文向大家描述一下CSS屬性display:inline-block的用法,在使用CSS實(shí)現(xiàn)表現(xiàn)的時(shí)候,會(huì)經(jīng)常接觸到display:inline-block這一屬性;可以將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象,但是對(duì)象的內(nèi)容作2012-12-30inline-block空隙之css letter-spacing與字體大小/字體關(guān)系數(shù)據(jù)表
本文提供inline-block空隙--letter-spacing與字體大小/字體關(guān)系數(shù)據(jù)表,需要的朋友可以參考下2012-12-09display:inline | block |inline-block-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
display:block就是將元素顯示為塊級(jí)元素. block元素的特點(diǎn)是: 總是在新行上開(kāi)始; 高度,行高以及頂和底邊距都可控制; 寬度缺省是它的容器的100%,除非設(shè)定一個(gè)寬2008-10-17- 這篇文章主要介紹了詳解CSS 去掉inline-block元素間隙的幾種方法,這些間隙會(huì)導(dǎo)致一些布局上的問(wèn)題,需要把間隙去掉。非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-13