如何实现标题居上、按钮与段落同排？CSS布局问题求助

问题场景 #

想要实现的布局效果：

• 标题<h2>单独位于段落上方
• 段落<p>和按钮<button>处于同一行

但修改.act的flex-direction: row后，标题、段落、按钮三者全部排在一行，不符合需求。

原HTML代码 #

<div class="up">
  <div class="ban">
    <div class="act">
      <h2>Join The Action</h2> 
      <p>Sign up for our product by clicking that button right over there!</p>
      <button>Join Up</button>
    </div>
  </div>
</div>

原CSS代码 #

.up {
  display: flex;
  justify-content: center;
  height: 19vh;
  align-items: center;
}

.ban {
  width: 1150px;
  height: 250px;
  border-radius: 25px;
  background-color: red;
  color: white;
}

.act {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  font-size: 25px;
  padding: 50px 50px;
}

.act p {
  padding: 10px 0;
}

.act button {
  display: inline-block;
  padding: 15px 30px;
  background-color: red;
  border: 2px solid white;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  font-size: 18px;
  margin-top: 10px;
}

解决方案 #

核心思路是嵌套Flex布局：保持.act的纵向排列（让标题单独占一行），把段落和按钮放进一个新的容器里，给这个容器设置横向Flex布局，实现两者同行。

修改后的HTML代码 #

<div class="up">
  <div class="ban">
    <div class="act">
      <h2>Join The Action</h2> 
      <!-- 新增容器包裹段落和按钮 -->
      <div class="p-btn-group">
        <p>Sign up for our product by clicking that button right over there!</p>
        <button>Join Up</button>
      </div>
    </div>
  </div>
</div>

修改后的CSS代码 #

.up {
  display: flex;
  justify-content: center;
  height: 19vh;
  align-items: center;
}

.ban {
  width: 1150px;
  height: 250px;
  border-radius: 25px;
  background-color: red;
  color: white;
}

.act {
  display: flex;
  flex-direction: column; /* 保持纵向排列，标题单独在上 */
  align-items:flex-start;
  font-size: 25px;
  padding: 50px 50px;
}

.act p {
  padding: 10px 0;
  margin-right: 20px; /* 给段落和按钮之间加间距 */
}

/* 新增容器的样式 */
.p-btn-group {
  display: flex;
  align-items: center; /* 让段落和按钮垂直居中对齐 */
}

.act button {
  padding: 15px 30px;
  background-color: red;
  border: 2px solid white;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  font-size: 18px;
  /* 去掉原有的margin-top，避免间距问题 */
}

说明 #

• .act保持flex-direction: column，确保标题<h2>单独占据一行，位于最上方
• 新增的.p-btn-group容器使用display: flex，让内部的段落和按钮横向排列
• 通过align-items: center让段落和按钮在垂直方向居中对齐，视觉更协调
• 给<p>添加margin-right，调整段落和按钮之间的间距，避免挤在一起

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