如何让Angular Material的Mat Card标题与副标题同行显示？

要让mat-card-title和mat-card-subtitle在同一行显示，你可以通过Flex布局调整它们的排列方式，具体步骤如下：

1. 修改HTML结构 #

给标题和副标题添加一个容器，方便统一控制布局：

<mat-card>
   <mat-card-header *ngFor="let club of result[0]">
      <div class="title-subtitle-group">
         <mat-card-title>{{club.clubName}}</mat-card-title>
         <mat-card-subtitle>Club</mat-card-subtitle>
      </div>
   </mat-card-header>
</mat-card>

2. 添加CSS样式 #

通过Flex布局让容器内的元素横向排列，并调整对齐方式和间距：

.title-subtitle-group {
  display: flex;
  align-items: center; /* 让标题和副标题垂直居中 */
  gap: 8px; /* 控制两者之间的横向间距，可根据需求调整 */
}

.title-subtitle-group mat-card-subtitle {
  margin: 0; /* 移除副标题默认的上下外边距 */
  /* 保留副标题默认的样式特征，可按需调整 */
  font-size: 0.875rem;
  opacity: 0.7;
}

这样就能实现标题与副标题在同一行显示的效果，同时保持Angular Material组件的原有视觉风格。

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