最直接办法是用 display: inline-block 或 flex；inline-block 保留块级特性但有空白间隙，flex 更可靠且支持对齐、等高、响应式伸缩，推荐现代页面使用。
用 display: inline 或 inline-block 让元素并排
块级元素（比如 <div>、<p>）默认独占一行，想让两个并排，最直接的办法是改显示模式。用 inline 会让元素像文字一样流动排列，但无法设宽高、内边距效果也受限；inline-block 更常用——保留块级特性（能设 width、padding、margin），又支持同行排列。
常见错误是只加了 inline-block 却没处理默认的“换行符间隙”：HTML 中换行或空格会被渲染成一个空格，导致两个 inline-block 元素间有几像素空隙。解决方法包括：
- 把 HTML 中两个标签写在同一行，中间不留空白
- 给父容器设
font-size: 0，子元素再单独设字体大小 - 用
float: left替代（但需清除浮动，已不推荐）
用 flex 布局更可控地实现同行显示
现代页面中，display: flex 是更可靠的选择，尤其当需要对齐、等高、响应式伸缩时。只要给父容器加 display: flex，它的直系子元素默认就在同一行（flex-direction: row）。
注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
flex子项默认不会换行，内容超宽会挤压或溢出，加flex-wrap: wrap才允许折行 - 如果子元素是
<div>这类块级元素，不用额外改display，它在 flex 容器里自动变成 flex 项目 - IE10+ 支持
flex，但老版本有前缀问题，如需兼容 IE10，得加display: -ms-flexbox
示例：
.container { display: flex; }
.item { width: 200px; }两个 .item 就会紧挨着排在一行。
用 float 实现同行但要小心副作用
float: left 确实能让两个块级元素并排，但它会让元素脱离文档流，导致父容器高度塌陷（表现为父容器看起来“没内容”）。这不是 bug，是 float 的原始设计逻辑。
如果你还用 float，必须处理后续影响：
- 给父容器加
overflow: hidden或overflow: auto可触发 BFC，自动包含浮动子项 - 用伪元素清除浮动：
.container::after { content: ""; display: table; clear: both; } -
float在响应式场景下难控制，比如小屏时你想让它堆叠，就得配合媒体查询重置float和width
为什么 display: grid 不是首选？
grid 当然也能让两个元素同行（比如 grid-template-columns: 1fr 1fr），但它面向的是二维布局，适合复杂网格结构。如果只是简单并排两个元素，用 grid 属于大炮打蚊子——多写配置、增加理解成本、兼容性略弱（IE 完全不支持原生 grid）。
真正该用 grid 的场景是：需要精确控制行列间距、跨列/跨行、对齐多个不同尺寸的区域。两个按钮或两个卡片并排，flex 足够且更轻量。
容易被忽略的一点是：哪怕你只写了 display: flex，浏览器也会隐式创建一个 flex 上下文，所有直系子元素的 vertical-align、white-space 等属性就不再按常规块/内联规则起作用了——这点调试时经常卡人几秒。
