本文讲解如何通过 css 的 `display` 属性（如 `inline-block` 或 `table-cell`）将 `
` 与 `
` 等块级元素在同一行内精准对齐，并解决因默认文档流导致的换行错位问题。
在 HTML 中，<h3> 和 <p> 默认均为块级元素（block），会独占一行，因此即使它们在 DOM 中相邻，浏览器也会自动换行渲染——这正是你遇到“h3 占了一整行，p 被挤到下一行”的根本原因。
要实现「行对行」（即视觉上左右并排、基线对齐）效果，关键在于改变其显示行为。以下是两种推荐方案：
✅ 方案一：inline-block（轻量灵活，推荐初用）
.first-class-titles,
.first-class-attributes {
display: inline-block;
vertical-align: middle; /* 统一对齐基准线，避免高低不一 */
margin: 0;
}? 注意：inline-block 元素间默认存在空白符间隙（由换行/缩进引起）。若需严丝合缝，可将父容器 .first-class-titles 的字体大小设为 0，再在子元素中重置字体大小；或移除 HTML 中 .first-class-titles 与 .first-class-attributes 之间的换行和空格。
✅ 方案二：display: table-cell（语义清晰，垂直居中更稳）
.first-class-titles,
.first-class-attributes {
display: table-cell;
vertical-align: middle;
padding: 0;
}
/* 父容器需声明为 table */
.first-class-titles {
display: table; /* 或包裹一层 <div style="display: table"> */
width: 100%;
}该方案天然支持单元格式对齐，vertical-align: middle 效果稳定，且不受空白符干扰，适合对齐精度要求高的场景。
⚠️ 额外优化建议
- 移除 <u><h3>...</h3></u> 中的 <u> 标签：<u> 已不推荐用于样式（语义化差），应改用 CSS text-decoration: underline；
- 重置默认边距：h3 和 p 均有浏览器默认 margin，建议统一清零：
.first-class-titles h3, .first-class-attributes p { margin: 0; }
✅ 最终精简结构示例（含修复后 HTML + CSS）
<div class="image-title">
<img src="..." alt="*" draggable="false" width="436">
<div class="first-class-titles">
<h3>Sign in</h3>
<p>(It's free)</p>
</div>
</div>.first-class-titles {
display: table;
width: 100%;
}
.first-class-titles h3,
.first-class-titles p {
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0 8px; /* 可选间距 */
}掌握 display 的语义化切换，是控制 HTML 元素布局关系的核心能力——告别强行浮动或绝对定位，用标准、可维护的方式实现精准对齐。
立即学习“前端免费学习笔记（深入）”；
