如何为Angular Material Stepper添加同行通用标题

别在mat-stepper标签内部塞标题元素了，它的内部DOM结构会直接隐藏你插入的div/span。要实现标题和步进器同行，换个思路——把两者放在同一个flex布局容器里就行，具体步骤如下：

1. HTML结构 #

用一个容器包裹标题和mat-stepper，通过flex布局实现横向排列：

<div class="stepper-wrap">
  <h2 class="stepper-title">工作流标题</h2>
  <mat-stepper linear>
    <mat-step label="信息填写">
      这里是信息填写步骤内容
    </mat-step>
    <mat-step label="确认提交">
      这里是确认提交步骤内容
    </mat-step>
  </mat-stepper>
</div>

2. CSS样式 #

给容器设置flex属性，让标题和步进器垂直居中，同时让步进器占满剩余宽度：

.stepper-wrap {
  display: flex;
  align-items: center;
  gap: 20px; /* 标题和步进器的间距，可按需调整 */
  margin-bottom: 15px;
}

.stepper-title {
  margin: 0;
  font-size: 1.4rem;
}

mat-stepper {
  flex: 1; /* 让步进器自动填充剩余空间 */
}

3. 响应式适配（可选） #

如果需要适配小屏幕，加个媒体查询让标题自动换行：

@media (max-width: 768px) {
  .stepper-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

这样就能实现你要的标题和步进器同行的效果了。

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