本文详解为何 inline-block 元素在设置固定宽度（如 500px）时意外换行，以及如何通过现代 CSS Flexbox 实现稳定、响应式的水平布局。
本文详解为何 `inline-block` 元素在设置固定宽度（如 500px）时意外换行，以及如何通过现代 css flexbox 实现稳定、响应式的水平布局。
在 Web 布局中，期望两个 <section> 元素并排显示却出现垂直堆叠，是初学者常遇的典型问题。你当前使用 display: inline-block 并为每个区块设定了 width: 500px，看似合理——但问题根源在于：inline-block 元素会将 HTML 中的换行符、空格等空白字符渲染为一个空格（约 4–8px 宽），导致两元素总宽度轻微超出容器可用空间，触发自动换行。尤其当父容器宽度有限（例如视口宽度仅 1024px），500px + 500px + 左右 margin（各 10px）+ 空白间隙 ≈ 超出 100%，浏览器只能回退为垂直排列。
更关键的是，inline-block 对齐依赖 vertical-align（默认 baseline），且难以精确控制间距与响应行为；而硬编码 width: 500px 和 height: 500px 会破坏跨设备适配性——在手机或小屏上必然溢出或错位。
✅ 推荐解法：使用 Flexbox（现代、语义清晰、原生支持对齐与间距）
只需三步改造：
为父容器启用 Flex 布局
将 <main> 设为 display: flex，其子元素（即两个 <section>）自动成为弹性项目，沿主轴（默认水平）排列。用相对单位替代固定像素宽度
设置 width: 50% 或更优的 flex: 1（均分剩余空间），配合 box-sizing: border-box 确保 padding/border 不撑大尺寸。用 gap 精确控制间距（推荐替代 margin）
避免因外边距合并或计算误差导致的布局偏移。
以下是优化后的完整代码示例：
main {
display: flex;
gap: 20px; /* 替代 margin，统一控制两区块间距 */
width: 100%;
}
section {
border-radius: 20px;
height: 500px; /* 可根据需求保留固定高，或改用 min-height: 50vh 提升响应性 */
background-color: #ffffff;
border: 1px solid #f5f5f5;
box-sizing: border-box;
}
section.structure,
section.specificity {
flex: 1; /* 等宽填充，自动适应容器变化 */
}<main> <section class="structure">结构说明</section> <section class="specificity">特异性规则</section> </main>
⚠️ 注意事项：
- 若需兼容 IE10/IE11，请避免 gap（可降级为 margin + :first-child 重置）；
- flex: 1 等效于 flex: 1 1 0，意味着项目可伸缩、不收缩、基础尺寸为 0，从而公平分配空间；
- 如需响应式断点，在 @media (max-width: 768px) 中将 main { flex-direction: column; } 即可优雅回退为垂直堆叠；
- 移除 display: inline-block 后，HTML 中的换行和空格不再影响布局，代码可读性也大幅提升。
总结：放弃对 inline-block 的“微调式修复”，拥抱 Flexbox 是解决水平并排问题最可靠、可维护、面向未来的方式。它不仅消除了空白字符干扰，还提供了开箱即用的对齐、分布与响应能力——这才是现代 CSS 布局的正确起点。
