如何以角度 4 对齐左右文本 mat-card-header？

Question

我需要对齐标题标签左侧和右侧标题中的文本内容。我尝试了不同的想法，但没有一个对我有用。帮我。

  <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

原文由 Sivabalakrishnan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您想继续使用 mat-title 元素，也可以这样做：

请参阅工作 StackBlitz 示例

在您的（我称之为）example-card.component.html 文件中

<mat-card  >
<mat-card-header>
 <mat-card-title class="card-container-left"> Test left</mat-card-title>
 <mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>

然后在你的 example-card.component.css

 .card-container-right{
  display: inline;
  float: right;
}

.card-container-left{
  display: inline;
}

..最后在你的 styles.css

 .mat-card-header-text{
  width: 100% !important;
}

这样做的技巧是覆盖 Angular 材料 .mat-card-header-text 为 mat-card-header 宽度的 100%。否则它的行为就像在内联元素中一样，只占用其子元素文本的宽度。防止您将它们隔开。

原文由 Narm 发布，翻译遵循 CC BY-SA 4.0 许可协议