您什麼時候使用內聯塊？

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

按鈕

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

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

棘手之處在於：

• 內聯元素的塊方向margin 將被完全忽略
• 內聯元素的padding 不會影響文本行的高度

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

當內聯按鈕開始換行時，情況會變得更糟：

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

不要忘記inline-flex和inline-grid

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

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

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

這永遠無法完全正確……

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

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

使用inline-flex或inline-grid ，您可以在內聯方向佈局的塊中擁有flexbox 或grid 佈局系統的所有功能。

仍然可以換行的塊

內聯塊元素將尊重寬度。這是它們與純內聯元素之間的另一個區別。人們過去¹ 使用內聯塊構建列佈局系統，因為它基本上可以執行浮動可以執行的操作，而無需擔心清除浮動²，從而允許人們利用比浮動更優雅的換行方式。

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

Dan 的示例。

內聯元素上的轉換

內聯元素不能進行轉換。因此，如果您需要轉換，則需要使用inline-block 。

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

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

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

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

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

所以你有一個列表……

• 三個
• 小
• 豬

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

 li {
  display: inline-block;
}

搞定了。

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

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

 ul {
  display: flex;
}

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

居中的列表

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

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

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

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

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

以上是您什麼時候使用內聯塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！