行內塊元素

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

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

在行內塊元素內部，會(huì )像塊級元素一樣設置內容的格式。就像所有塊級或行內替換元素一樣，行內塊元素也有屬性width和height，如果比周?chē)鷥热莞?，這些屬性會(huì )使行高增加。

下面來(lái)考慮一些示例標記，它們能更清楚地說(shuō)明這一點(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>

對以上標記，應用下面的規則：

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中，行內段落格式化為正常的行內內容，這說(shuō)明width和text- align被忽略了（它們不能應用于行內元素）。不過(guò)，對于第三個(gè)div元素，作為行內塊元素的段落則有這兩個(gè)屬性，因為它作為一個(gè)塊級元素被格式化，這個(gè)段落還要求文本行更高一些，因為它會(huì )影響行高，就好像這是一個(gè)替換元素一樣。

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

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

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

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

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