HTML中换行符导致文字变两行，因浏览器默认将、\n、块级元素间空白视为换行；可通过display:inline/inline-block、删HTML换行、Flex布局等方案合并为单行。
HTML 中换行符为什么会让文字变两行
浏览器默认把 <br>、\n（文本中的回车）、块级元素（如 <p></p>、<div>）之间的空白当作换行处理。哪怕只是写成两行 HTML 标签，只要中间有换行或空格，又没做特别处理，就可能渲染出两行。<h3>用 <code>display: inline 或 display: inline-block 拉平元素
这是最直接、可控的方式——让原本独占一行的标签“放弃块级特权”，变成可并排的内联元素：
-
<div>第一行</div> <div>第二行</div>→ 加 CSS：div { display: inline; } - 如果需要控制垂直对齐或设宽高，改用
display: inline-block（但注意它会保留 HTML 换行产生的空格间隙） - 避免对
<p></p>这类语义化强的标签强行覆盖display，优先考虑是否该用<span></span>
删掉 HTML 源码里的换行和空格
内联元素之间如果有换行或多个空格，浏览器会合并成一个空格，导致“看起来是两行”实际是“两个词被空格隔开”。解决方法很简单：
- 把两行标签写在同一行：
<span>第一行</span><span>第二行</span> - 或者用注释“吃掉”换行：
<span>第一行</span><!-- --><span>第二行</span> - 不推荐靠
font-size: 0父容器再重设子元素字号——太绕，且影响可访问性
用 Flex 布局强制单行（适合容器级控制）
当你要合并的是某个容器内的所有子元素（比如导航栏、标签组），Flex 是更现代、更健壮的选择：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加：
display: flex; flex-wrap: nowrap; - 子元素默认横向排列，即使原来是
<div> 也自动变单行<li>注意：老版本 iOS Safari 对 <code>flex-wrap支持弱，若需兼容 Android 4.x 或 iOS 8 以下，得加-webkit-flex-wrap: nowrap; - 别忘了设置
align-items: center;避免子元素上下错位
真正麻烦的不是“怎么合并”，而是合并后要不要留空隙、要不要响应式折行、屏幕阅读器怎么念——这些细节一动，方案就得全盘调整。
