如何让文本与按钮在同一行对齐（含按钮下边框对齐）

要让文本和按钮在同一行对齐且对齐按钮下边框，只需对现有Flexbox样式做两处关键调整：

修改后的CSS代码 #

.cta {
  padding: 100px 0;
}

.cta-content {
  background-color: #3882f6;
  border-radius: 10px;
  color: #f9faf8;
  padding: 50px 100px;
}

.cta-title {
  font-weight: bold;
}

.flex-group {
  display: flex;
  align-items: flex-end; /* 核心：让子元素对齐容器底部 */
  gap: 20px; /* 可选：增加文本与按钮的间距 */
}

.cta-text {
  margin: 0; /* 清除p标签默认的底部外边距，避免干扰对齐 */
}

.cta-btn {
  color: inherit;
  background-color: inherit;
  border: 2px solid currentColor;
  padding: 8px 40px;
  border-radius: 5px;
  font-weight: bold;
}

关键说明 #

• *align-items: flex-end*：将Flex容器内的所有子元素对齐容器底部，直接实现文本与按钮下边框对齐的需求。
• 清除<p>的默认margin：浏览器默认给<p>标签添加了上下外边距，底部外边距会导致文本位置偏上，必须移除才能保证对齐准确。
• *gap*属性是可选优化，用来提升文本和按钮之间的视觉间距，你可以根据需求调整数值。

HTML结构无需修改，保持原代码即可。

内容的提问来源于stack exchange，提问作者Hello