本文详解如何使用 flexbox 实现文本与按钮在同一行严格对齐，重点解决因段落默认外边距和对齐模式误用导致的底部（如按钮 border-bottom）错位问题。
本文详解如何使用 flexbox 实现文本与按钮在同一行严格对齐，重点解决因段落默认外边距和对齐模式误用导致的底部（如按钮 border-bottom）错位问题。
在现代 CSS 布局中，将文本与按钮并排对齐看似简单，实则常因两个隐蔽因素失败：浏览器对 元素的默认上下外边距（margin）
正确解法是组合使用以下两项关键调整：
- 重置段落默认外边距：移除 .cta-text 的 margin-bottom（通常为 1em），避免其向下推挤按钮；
-
采用 align-items: flex-end：使所有子元素（包括
和
以下是完整、可直接运行的优化代码：
.flex-group {
display: flex;
align-items: flex-end; /* ✅ 关键：按容器底部对齐 */
}
.cta-text {
margin: 0; /* ✅ 关键：清除默认 margin，尤其 margin-bottom */
}
/* 其余样式保持不变 */
.cta {
padding: 100px 0;
}
.cta-content {
background-color: #3882f6;
border-radius: 10px;
color: #f9faf8;
padding: 50px 100px;
}
.cta-title {
font-weight: bold;
}
.cta-btn {
color: inherit;
background-color: inherit;
border: 2px solid currentColor;
padding: 8px 40px;
border-radius: 5px;
font-weight: bold;
}<div class="cta">
<div class="cta-content">
<h3 class="cta-title">Call to action! It's time!</h3>
<div class="flex-group">
<p class="cta-text">
Sign up for our product by clicking that button right over there!
</p>
<button class="cta-btn">Sign up</button>
</div>
</div>
</div>⚠️ 注意事项：
- ❌ 避免使用 align-items: baseline：它对齐的是字体内部的基线（text baseline），受字体大小、行高、字母下沉（descender）影响，不可控；
- ✅ flex-end 是更可靠的选择，它对齐的是每个子元素的 cross-axis 末尾边界（即垂直方向的底部），与 border-bottom 所在位置一致；
- 若后续需微调垂直间距（如让文本略上浮），可对 .cta-text 添加 margin-bottom: -2px 等负值，但应优先保证 margin: 0 的基础状态；
- 在响应式场景中，建议为 .flex-group 添加 flex-wrap: wrap 并配合媒体查询，在小屏下改为 flex-direction: column，保障可访问性。
通过这两处精准干预，你将获得真正意义上的视觉对齐——文本内容底缘、按钮内边距底缘、以及至关重要的 border-bottom，三者严丝合缝地落在同一条水平线上。
