行內(nèi)塊元素

看上去值名inline-block是一個(gè)混合產(chǎn)物，實(shí)際上也確實(shí)如此，行內(nèi)塊元素（inline-block element）確實(shí)是塊級(jí)元素和行內(nèi)元素的混合，這個(gè)display值是網(wǎng)站建設(shè)CSS2.1中新增的。

行內(nèi)塊元素作為一個(gè)行內(nèi)框與其他元素和內(nèi)容相關(guān)。換句話說，它就像圖像一樣放在一個(gè)文本行中，實(shí)際上，行內(nèi)塊元素會(huì)作為替換元素放在行中。這說明，網(wǎng)頁設(shè)計(jì)中行內(nèi)塊元素的底端默認(rèn)地位于文本行的基線上，而且內(nèi)部沒有行分隔符。

在行內(nèi)塊元素內(nèi)部，會(huì)像塊級(jí)元素一樣設(shè)置內(nèi)容的格式。就像所有塊級(jí)或行內(nèi)替換元素一樣，行內(nèi)塊元素也有屬性width和height，如果比周圍內(nèi)容高，這些屬性會(huì)使行高增加。

下面來考慮一些示例標(biāo)記，它們能更清楚地說明這一點(diǎn)：

<div id="one">

This text is the content of a block-level level element. Within this 

block-level element is another block-level element.<p>Look, it's a 

block-level paragraph.</p> Here's the rest of the DIV, which is still block-level.

</div>

<div id="two">

This text is the content of a block-level level element. Within this 

block-level element is an inline element.<p>Look, it's an inline 

paragraph.</p> Here's the rest of the DIV, which is still block-level.

</div>

<div id="three">

This text is the content of a block-level level element. Within this 

block-level element is an inline-block element.<p>Look, it's an inline block

paragraph.</p> Here's the rest of the DIV, which is still block-level.

</div>

對(duì)以上標(biāo)記，應(yīng)用下面的規(guī)則：

div {margin: 1em 0; border: 1px solid;}

p {border: 1px dotted;}

div#one p {display: block; width: 6em; text-align: center;}

div#two p {display: inline; width: 6em; text-align: center;}

div#three p {display: inline-block: width: 6em; text-align: center;}

注意，在第二個(gè)div中，行內(nèi)段落格式化為正常的行內(nèi)內(nèi)容，這說明width和text- align被忽略了（它們不能應(yīng)用于行內(nèi)元素）。不過，對(duì)于第三個(gè)div元素，作為行內(nèi)塊元素的段落則有這兩個(gè)屬性，因?yàn)樗鳛橐粋€(gè)塊級(jí)元素被格式化，這個(gè)段落還要求文本行更高一些，因?yàn)樗鼤?huì)影響行高，就好像這是一個(gè)替換元素一樣。

網(wǎng)頁設(shè)計(jì)中如果行內(nèi)塊元素的width未定義，或者顯式聲明為auto，元素框會(huì)收縮以適應(yīng)內(nèi)容。也就是說，元素框的寬度剛好足夠包含該內(nèi)容，而沒有多余的空間。行內(nèi)框也會(huì)這樣做，不過行內(nèi)框可能會(huì)跨多個(gè)文本行，而行內(nèi)塊元素不能。因此，以下規(guī)則應(yīng)用到前面的示例標(biāo)記時(shí)：

div#three p {display: inline-block; height: 2em;}

會(huì)創(chuàng)建一個(gè)較高的框，它的寬度剛好能包含內(nèi)容，如圖7-52所示。

有時(shí)行內(nèi)塊元素很有用，例如，如果有5個(gè)超鏈接，網(wǎng)站建設(shè)人員希望它們?cè)谝粋€(gè)工具條中寬度相等。為了讓它們分別占其父元素寬度的20%，但是仍保持其為行內(nèi)元素，可以聲明如下：

#navbar a {display: inline-block; width: 20%;}