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

按鈕

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

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

棘手之處在于：

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

因此，雖然按鈕本身的樣式設置得相當好，但父元素和周圍文本可能并非如此。這是一個演示：

當內(nèi)聯(lián)按鈕開始換行時，情況會變得更糟：

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

不要忘記 inline-flex 和 inline-grid

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

以帶有圖標的按鈕為例，如下所示：

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

這永遠無法完全正確……

但使用 inline-flex 可以輕松解決這個問題：

.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)元素之間的另一個區(qū)別。人們過去1 使用內(nèi)聯(lián)塊構(gòu)建列布局系統(tǒng)，因為它基本上可以執(zhí)行浮動可以執(zhí)行的操作，而無需擔心清除浮動2，從而允許人們利用比浮動更優(yōu)雅的換行方式。

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

Dan 的示例。

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

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

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

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

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

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

這是對我的原始推文另一個非常流行的答案。列表元素垂直堆疊列表項，就像塊級元素一樣。它們實際上并非塊。它們是 display: list-item;，這實際上在這里很重要，正如我們將看到的。流行的用例是“當我想水平排列列表時”。

所以你有一個列表……

• 三個
• 小
• 豬

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

li {
  display: inline-block;
}

搞定了。

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

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

ul {
  display: flex;
}

……這實現(xiàn)了水平行（flexbox 默認值），但保留了項目符號，因為您沒有更改列表項本身的顯示方式。如果您想手動刪除它，則取決于您。

居中的列表

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

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

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

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

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

以上是您什么時候使用內(nèi)聯(lián)塊？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！