最直接办法是用 display: inline-block 或 flex；inline-block 保留块级特性但有空白间隙，flex 更可靠且支持对齐、等高、响应式伸缩，推荐现代页面使用。
用 display: inline 或 inline-block 让元素并排
块级元素（比如 常见错误是只加了 现代页面中， 注意几个关键点： 立即学习“前端免费学习笔记（深入）”； 示例： 如果你还用 真正该用 容易被忽略的一点是：哪怕你只写了 ）默认独占一行，想让两个并排，最直接的办法是改显示模式。用 inline 会让元素像文字一样流动排列，但无法设宽高、内边距效果也受限；inline-block 更常用——保留块级特性（能设 width、padding、margin），又支持同行排列。
inline-block 却没处理默认的“换行符间隙”：HTML 中换行或空格会被渲染成一个空格，导致两个 inline-block 元素间有几像素空隙。解决方法包括：
font-size: 0，子元素再单独设字体大小float: left 替代（但需清除浮动，已不推荐）用
flex 布局更可控地实现同行显示display: flex 是更可靠的选择，尤其当需要对齐、等高、响应式伸缩时。只要给父容器加 display: flex，它的直系子元素默认就在同一行（flex-direction: row）。
flex 子项默认不会换行，内容超宽会挤压或溢出，加 flex-wrap: wrap 才允许折行display，它在 flex 容器里自动变成 flex 项目
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 等属性就不再按常规块/内联规则起作用了——这点调试时经常卡人几秒。
