如何在角度 4 中对齐左右文本垫卡标题?

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>

Answer 1

如果要继续使用mat-title元素，也可以执行此操作：

查看工作堆栈闪电战示例

在您的(我称之为(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>

然后在您的示例 card.component 中.css

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

..最后是你的风格.css

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

这样做的诀窍是覆盖 角度材料.mat-card-header-text是 100% 的宽度mat-card-header.否则，它的行为类似于内联元素，并且仅占用其子元素文本的宽度。防止您将它们隔开。

Answer 2

您可以在垫子工具栏中使用材料设计使用的内容

<mat-card-title>
<span>Test left</span>
<span class="fill-remaining-space"></span>
<span>Test right</span>
</mat-card-title> 

在您的.css

.fill-remaining-space {
flex: 1 1 auto;
}

对不起，这不起作用!!!!在垫子工具栏中工作，在垫卡标题中不起作用。

这是它的工作原理，我知道我在某个地方用过它

<mat-card>
<mat-card-title-group>
<span>Test left</span>
<span class="fill-remaining-space"></span>
<span>Test right</span>
</mat-card-title-group>
</mat-card>

请参阅：https://stackblitz.com/edit/angular-rb5vmu 工作示例

Answer 3

在.mat-card-headerclass 上添加自定义 CSS

.mat-card-header{
justify-content: flex-end /* for right*/
justify-content: flex-start /* for left*/
justify-content: centre /* for center*/
}