我需要在标题标记左侧和右侧的标题中对齐文本内容。我尝试了不同的想法,但没有一个适合我。帮我。
<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>
如果要继续使用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>
然后在你的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;
}
这方面的技巧是将角度材料.mat-card-header-text
重写为mat-card-header
宽度的100%。否则它的行为类似于内联元素,只占用其子元素文本的宽度。防止你将它们隔开。
您可以使用材质设计在mat-toolbar中使用的内容
<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-Toolbar中工作,不在Mat-card Title中。
这是它的工作原理,我知道我曾在某个地方使用它
<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>
在.mat-card-header类上添加自定义css
.mat-card-header{
justify-content: flex-end /* for right*/
justify-content: flex-start /* for left*/
justify-content: centre /* for center*/
}