应使用 display: inline-block 实现块级元素并排且支持宽高，或用 white-space: nowrap 防止单标签内文字折行，Flex 布局则适合语义独立元素的可控并排。
用 display: inline 或 display: inline-block 让文字不换行
默认情况下，<p></p>、<div> 这类块级元素会独占一行，两行字写在两个块里就必然断开。想让它们“放在一起”，本质是让容器不强制换行。<p>最直接的做法是改显示模式：</p>
<ul>
<li>
<code>display: inline：让元素像 <span></span> 一样内联，忽略上下 margin，但无法设宽高、padding 垂直方向可能不生效
display: inline-block：保留内联位置（不换行），同时支持 width/height/padding/margin —— 大多数场景更实用float：容易引发父容器塌陷，现代布局没必要用 white-space: nowrap 防止文字内部折行
如果两行字其实写在一个标签里（比如 <div>第一行 第二行</div>），但字体太长或容器太窄，浏览器会自动折行——这不是换行符导致的，而是排版行为。
加这个声明就能锁住：
立即学习“前端免费学习笔记（深入）”；
div {
white-space: nowrap;
}注意：nowrap 只影响该元素内部的空格和换行符处理，不会把两个独立块级元素拉到同一行。
- 常见误用：给父容器设
nowrap，但子元素仍是div，没用 - 搭配
overflow: hidden或text-overflow: ellipsis才能安全截断超长文本
用 Flex 布局让多个块级元素并排
当你要并排的是两个语义独立的块（比如 <h3>标题</h3> 和 <span>副标</span>），又不想改 display 类型，Flex 是更可控的选择。
给它们的父容器设：
.container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}- 子元素默认横向排列，天然“放在一起”
- 避免用
flex-direction: column—— 那就又变两行了 - IE10+ 支持，如需兼容 IE9 及更早，得回退到
inline-block
别踩这些坑
实际写的时候，这几个点最容易卡住：
- 父容器宽度不够，即使用了
inline-block或flex，内容也会被挤到下一行 —— 先检查width和box-sizing - 元素间有空格或换行符，
inline-block会把它渲染成一个空格，造成意外间隙 —— 把 HTML 写成<span>A</span><span>B</span>紧挨着，或用注释消除：<span>A</span><!-- --><span>B</span> -
vertical-align默认是baseline，文字高度不一致时看起来像错位 —— 统一设成vertical-align: middle
真正难的不是让两行字“看起来”在一起，而是搞清你面对的是语义分隔、排版折行，还是容器限制 —— 选错方案，后面全在调 margin 和 hack。
