您什么时候使用内联块？

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中文网其他相关文章！