display: inline-block是一個(gè)經(jīng)典的CSS 屬性值！它並非新特性，瀏覽器兼容性也無需擔(dān)心。許多開發(fā)者都會(huì)直覺地使用它。但讓我們更深入地了解一下。它究竟在哪些情況下有用？與其他類似選項(xiàng)相比，何時(shí)選擇它？

按鈕

我聽到的最常見答案是：我總是將其用於按鈕。

最終，我認(rèn)為這是有道理的，但這導(dǎo)致了我認(rèn)為的輕微誤解。其理念是，希望看起來像按鈕的元素（可能使用<a></a>、<button></button>或其他元素創(chuàng)建）能夠像自然那樣內(nèi)聯(lián)排列，但能夠擁有margin 和padding。這就是誤解的部分： display: inline;元素仍然可以擁有margin 和padding，並且其行為可能與您預(yù)期的一致。

棘手之處在於：

• 內(nèi)聯(lián)元素的塊方向margin 將被完全忽略
• 內(nèi)聯(lián)元素的padding 不會(huì)影響文本行的高度

因此，雖然按鈕本身的樣式設(shè)置得相當(dāng)好，但父元素和周圍文本可能並非如此。這是一個(gè)演示：

當(dāng)內(nèi)聯(lián)按鈕開始換行時(shí)，情況會(huì)變得更糟：

所以，我認(rèn)為在按鈕上使用inline-block非常合理。但是……

不要忘記inline-flex和inline-grid

使用display: inline-flex和inline-grid值，您將獲得與inline-block相同的良好行為，但元素（通常是按鈕）可以從更強(qiáng)大的內(nèi)聯(lián)佈局系統(tǒng)中受益。

以帶有圖標(biāo)的按鈕為例，如下所示：

 <a data-line="" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" html="">.button svg {
  vertical-align: middle;
}</a>

這永遠(yuǎn)無法完全正確……

但使用inline-flex可以輕鬆解決這個(gè)問題：

 .button {
  display: inline-flex;
  align-items: center;
}

使用inline-flex或inline-grid ，您可以在內(nèi)聯(lián)方向佈局的塊中擁有flexbox 或grid 佈局系統(tǒng)的所有功能。

仍然可以換行的塊

內(nèi)聯(lián)塊元素將尊重寬度。這是它們與純內(nèi)聯(lián)元素之間的另一個(gè)區(qū)別。人們過去1 使用內(nèi)聯(lián)塊構(gòu)建列佈局系統(tǒng)，因?yàn)樗旧峡梢詧?zhí)行浮動(dòng)可以執(zhí)行的操作，而無需擔(dān)心清除浮動(dòng)2，從而允許人們利用比浮動(dòng)更優(yōu)雅的換行方式。

內(nèi)聯(lián)塊元素表現(xiàn)為可以換行的列（甚至可以縮小到1 列）的理念至今仍然存在，因?yàn)樗且环N技巧，可以在HTML 電子郵件中使用，以允許多列佈局在小屏幕上折疊為單列而無需使用媒體查詢（某些電子郵件客戶端不支持媒體查詢）。

Dan 的示例。

內(nèi)聯(lián)元素上的轉(zhuǎn)換

內(nèi)聯(lián)元素不能進(jìn)行轉(zhuǎn)換。因此，如果您需要轉(zhuǎn)換，則需要使用inline-block 。

不在自身中間斷開的列子元素

可以在段落文本上使用CSS 列，您不必關(guān)心任何給定的段落是否跨列斷開。但有時(shí)CSS 列用於塊，這將很尷尬。假設(shè)這些塊有它們自己的背景和填充。斷開在視覺上非常奇怪。

這是一個(gè)我不能說我100% 理解的奇怪技巧，但是如果您在這些框上使用display: inline-block; （並且可能使用width: 100%;以確保它們保持列寬），那麼它們就不會(huì)斷開，並且填充將被保留。

快速使列表水平排列的方法

這是對(duì)我的原始推文另一個(gè)非常流行的答案。列表元素垂直堆疊列表項(xiàng)，就像塊級(jí)元素一樣。它們實(shí)際上並非塊。它們是display: list-item; ，這實(shí)際上在這裡很重要，正如我們將看到的。流行的用例是“當(dāng)我想水平排列列表時(shí)” 。

所以你有一個(gè)列表……

• 三個(gè)
• 小
• 豬

您想將其改為一行，您可以……

 li {
  display: inline-block;
}

搞定了。

我快速在VoiceOver 中試聽了一下，內(nèi)聯(lián)塊列表仍然將元素宣佈為列表，但沒有朗讀項(xiàng)目符號(hào)，這是有道理的，因?yàn)樗鼈儾淮嬖?。這就是將列表項(xiàng)本身的顯示方式更改為非list-item的問題：它們失去了其，咳咳，列表項(xiàng)特性。

另一種方法是將父元素設(shè)為flexbox 容器……

 ul {
  display: flex;
}

……這實(shí)現(xiàn)了水平行（flexbox 默認(rèn)值），但保留了項(xiàng)目符號(hào)，因?yàn)槟鷽]有更改列表項(xiàng)本身的顯示方式。如果您想手動(dòng)刪除它，則取決於您。

居中的列表

說到列表，Jeff Starr 剛剛寫了一篇關(guān)於居中文本中列表的博客，這也會(huì)變得很尷尬。尷尬之處在於列表項(xiàng)內(nèi)的文本可以居中，但列表項(xiàng)本身仍然是全寬，從而創(chuàng)建了項(xiàng)目符號(hào)保持與左側(cè)對(duì)齊的情況。

Jeff 的解決方案是將整個(gè)列表設(shè)為內(nèi)聯(lián)塊。這使列表的寬度僅與其內(nèi)容的自然寬度一樣寬，允許項(xiàng)目符號(hào)離開左邊緣並隨居中內(nèi)容一起移動(dòng)。只要在前後有塊級(jí)元素，這都是一個(gè)很好的解決方案。

作為替代方案，如果目標(biāo)是將列表的寬度縮小到內(nèi)容的寬度，則也可以在不阻止列表成為塊級(jí)元素的情況下實(shí)現(xiàn)這一點(diǎn)：

 ul {
  width: max-content;
  margin: 0 auto;
  text-align: left;
}

1. 內(nèi)聯(lián)塊還有另一個(gè)棘手的問題。與內(nèi)聯(lián)元素一樣，它們之間的任何空格實(shí)際上都會(huì)呈現(xiàn)為空格。因此，如果它們之間有任何空格，則兩個(gè)50% 寬的inline-block元素將無法在一行中顯示。好消息是有技巧可以解決這個(gè)問題。
2. 我說“過去”是因?yàn)椋绻裉煲u作列系統(tǒng)，您幾乎肯定會(huì)使用flexbox 或grid——或者根本不構(gòu)建“系統(tǒng)”，因?yàn)閮H僅使用這些語法在很大程度上否定了對(duì)系統(tǒng)的需求。

以上是您什麼時(shí)候使用內(nèi)聯(lián)塊？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！