css - 将 Material 卡标题的文本右对齐

Question

我尝试将我的 matcard 标题右对齐，但 css 不起作用..为什么？

<mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}">
  <mat-card-header>

   <mat-card-title [ngStyle]="{ 'text-align':'right' }">BLABLA</mat-card-title>

  </mat-card-header>

</mat-card>

Answer 1

你可以这样做:

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

然后在您的 css/scss 中为这些类定义一些样式:

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

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

然后在你的 styles.css 中

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