網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

display:inline-block的幾個應用及bug

日期:2013-11-29  來源:攀枝花惠康網絡公司

和巨匠一樣經常使用display:inline和display:block來進行塊元素(block element)和內聯元素(inline element,也叫行內元素)之間的轉換。

display:inline-block的幾個應用

塊元素和內聯元素的首要區別:

1.塊元素會自動在末尾加一個換行,而內聯元素不會,多個內聯元素會自動排成一行,好比img標簽或span標簽插到一行文字中,他會和這行文字自動排成一行,而如不美觀你在這行文字中插入一個塊元素標簽,好比div標簽,那么這個div標簽會自己獨有一行。查看demo:http://www.css88.com/demo/inline-block/inline-and-block.html
3.塊對象界說的自身垂直邊距可以改變行高,而內聯元素雖然可以界說但改變不了行高。

巨匠可以再看看:

更多關于塊元素和內聯元素可以看看這里http://www.css88.com/archives/646;


2.塊元素可以界說自身的高度(width)和寬度(height),而內聯元素不成以。

按上述體例display:inline-block或者_display:inline;zoom:1后line-height就失蹤效了,且則沒有好的解決方案,我是經由過程padding-top來做的,不知道巨匠有沒有什么好的方案,接待留言填補。

display:inline-block是什么呢?

將對象呈遞為內聯對象,可是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在統一行內,許可空格。這就是display:inline-block的浸染,再講的通俗一點就是,Display值為inline-block的元素內部形成一個塊狀盒模子,而本體態成近似一個內聯的被替代元素”。即display為inline-block的元素既可以像塊狀元素一樣界說高度寬度,又可以和內聯元素(好交鋒字)枚舉在一行。(轉載請注明出處:WEB前端開發 http://www.css88.com/)

( ⊙o⊙ )哇,好強年夜的屬性??!我以前怎么沒發現???是的很強年夜,可是以前的FF2,IE6,IE7不撐持改屬性(今朝撐持的瀏覽器:FF3,Opera,Safari,Chrome,ie8),FF2可以使用FF的私有屬性display:-moz-inline-box;而且FF2絕年夜年夜都已經進級到FF3了,所以不成什么年夜的問題了,IE6和IE7擁有這個display:inline-block就會觸發layout,就相當于zoom:1(關于ie的layout看以查看:http://www.css88.com/archives/tag/haslayout),我們可以用該特征在IE6和IE7下模擬display:inline-block;也可以直接讓塊元素設置為內聯對象呈遞然后觸發塊元素的layout,即display:inline; zoom:1;

1.先看效不美觀圖:

2009-06-21_165043

2.html代碼:


body{ font-size:12px;}

ol,ul{list-style:none; margin:0; padding:0}

a:link,a:visited{color:#555555;text-decoration:none;}

a:hover{color:#1A7CBC;text-decoration:underline;}

.selector{width:400px;border:1px solid #CDCDCD; padding:0px 2px 2px; margin:0 auto;zoom:1; overflow:hidden;}

.selector ol.tokenList li{float:left; margin-right:2px; margin-top:2px;height: 20px;color:#FFFFFF;}

.selector ol.tokenList li a{display:inline-block;padding-left:5px; height:20px;  background-image:url(bg.png); background-repeat:no-repeat;background-position:0 0;}

.selector ol.tokenList li a span{ display:inline-block;color:#FFFFFF; height:16px; line-height:1;padding-top:4px; line-height\**\:22px\9; background-image:url(bg.png); background-repeat:no-repeat; background-position:right 0; padding-right:5px; white-space:nowrap;}

.selector ol.tokenList li a:hover {color:#FFFFFF;text-decoration:none;}

.selector ol.tokenList li a span .x{display:inline-block;_display:inline; width:7px;height:7px;vertical-align:middle;cursor:pointer; margin-left:5px;font-size:1px; line-height:1px;background:url(col.png); zoom:1;}

.selector ol.tokenList li input{width:20px;height:16px;margin:0;padding:0;border:0;outline:0;}


查看demo:http://www.css88.com/demo/inline-block/inline-block.html

秦歌的display:inline-block的應用兩例和CSS{display:inline-block};

3.CSS代碼:


<div class="selector">

<ol class="tokenList">

<li><a href=http://www.css88.com/archives/"#"><span>草包<em class="x"></em></span></a></li>

<li><a href="#"><span>雷霍霆<em class="x"></em></span></a></li>

<li><a href="#"><span>龍翔<em class="x"></em></span></a></li>

<li><a href="#"><span>搜道<em class="x"></em></span></a></li>

<li><a href="#"><span>無憂<em class="x"></em></span></a></li>

<li><a href="#"><span>王帥帥<em class="x"></em></span></a></li>

<li><a href="#"><span>建仔<em class="x"></em></span></a></li>

<li><a href="#"><span>不告訴你<em class="x"></em></span></a></li>

<li><a href="#"><span>波仔<em class="x"></em></span></a></li>

<li><a href="#"><span>辰風<em class="x"></em></span></a></li>

<li><a href="#"><span>李曉晨<em class="x"></em></span></a></li>

<li><a href="#"><span>榮先乾<em class="x"></em></span></a></li>

<li><a href="#"><span>神飛<em class="x"></em></span></a></li>

</ol>

</div>

懌飛的display:inline臭番茄的:跨瀏覽器的inline-block

IE6的bug:(轉載請注明出處:WEB前端開發 http://www.css88.com/)

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图