块级元素默认换行因浏览器自动添加空白；inline-block有间隙问题；flex布局最干净，父设display: flex即可同行，配合gap、align-items等属性精准控制。
为什么 <h1> <div> 一写就换行
因为它们默认是块级元素，浏览器会自动在前后插入换行——不是你写了换行符，而是浏览器强制加的。哪怕只改字号、不加其他样式，<h2> 也会独占一行，破坏导航栏或按钮组的水平排列。
用 display: inline-block 替代但要注意空白间隙
把 <div> 或 <h3> 改成 display: inline-block 能让它“看起来”像文字一样并排，但 HTML 源码里的换行和空格会被渲染成约 4px 的间隙。三个宽度各为 33.33% 的元素，加起来轻松超 100%，第三列就会掉下去。
- 删掉标签间的换行和空格（写成
<div></div><div></div>连写） - 给父容器设
font-size: 0，子元素再单独设字体大小 - 更稳妥的做法：直接换
display: flex，空白间隙问题彻底消失
用 flex 布局让多个块级元素严格同行
这是目前最干净、语义最清晰的解法。父容器设 display: flex，子元素自动横向排列，宽度计算由 flex 自动协调，不再受空白、浮动或 display 类型干扰。
- 对齐方式用
align-items: center垂直居中，避免高低不齐 - 间距控制用
gap，比margin更可靠（不用考虑首尾额外边距） - 如果内容超宽，加
flex-wrap: nowrap防止意外折行（默认就是 nowrap，但显式声明更明确）
表格里 <td> 不换行要三步一起配
white-space: nowrap 单独加在 <td> 上基本无效——表格有自己的布局逻辑，它不知道“一行该多宽”。必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed - 给对应
<col>或<td>设明确宽度，比如width: 150px - 给
<td>加display: block或inline-block，否则 nowrap 缺少作用上下文
漏掉任意一步，换行照常发生，连 text-overflow: ellipsis 都不会生效。
