display: inline-block 是最常用且兼容性好的多元素同行显示方案，兼具块级元素的盒模型控制与行内元素的并排特性，但需处理空白间隙和 vertical-align 对齐问题。

让多个元素在一行显示，用 display: inline-block 是最常用且兼容性好的方式之一。它既保留了块级元素可设置宽高、内边距、外边距的特性，又具备行内元素“并排排列”的行为。

为什么选 inline-block 而不是 inline？

inline 元素（如 span、a）默认同行显示，但无法直接设置宽度、高度、上下 margin 和 padding（部分 padding 会显示但不影响布局）。而 inline-block 兼具两者优点：能设尺寸和盒模型属性，又能自然换行对齐。

基础写法与关键细节

给需要横排的元素统一设置：

display: inline-block;

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

但要注意几个容易出问题的点：

• 默认有空白符间隙：HTML 中元素间的换行或空格会被渲染为约 4px 的空白间隙。解决方法有三种：
  • 父容器设 font-size: 0，子元素再单独设字体大小
  • 移除 HTML 中元素标签间的换行和空格（不推荐，影响可读性）
  • 用负 margin（如 margin-left: -4px），但需适配不同字体环境
• 垂直对齐方式默认是 baseline，可能导致高低不齐。建议显式设置：vertical-align: top; 或 middle 等值
• 若父容器宽度不够，元素会自动折行——这是正常行为，类似文字换行

一个实用示例

比如实现三列导航按钮：

HTML：

<nav class="nav"><br>
  <button class="nav-item">首页</button><br>
  <button class="nav-item">关于</button><br>
  <button class="nav-item">联系</button><br>
</nav>

CSS：

.nav { font-size: 0; }<br>
.nav-item {<br>
  display: inline-block;<br>
  vertical-align: top;<br>
  font-size: 14px;<br>
  padding: 8px 16px;<br>
  margin-right: 10px;<br>
}

这样三个按钮就能严格贴顶、无间隙、等高并排显示。

替代方案提醒

虽然 inline-block 很实用，但现代布局中更推荐：

• Flexbox（display: flex）：控制更精准，无空白间隙问题，支持对齐、换行、伸缩
• Grid（display: grid）：适合二维布局，结构清晰

但如果你要兼容 IE8–IE9，inline-block 仍是稳妥选择。