如何在角4中对齐左右文本mat-card-header? [英] How to align left and right text mat-card-header in angular 4?
问题描述
我需要在标题标签的左侧和右侧的标题中对齐文本内容。我尝试了不同的想法,但没有一个适合我。
I need to align the text content in the header on left and right side of header tag. i tried different ideas, but none works for me. help me.
<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>
推荐答案
如果要继续操作,也可以执行此操作使用标题
元素:
You can also do this if you want to continue to use the mat-title
elements:
请参见工作 StackBlitz示例
在您的示例卡中。 .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%。否则,它的行为类似于inline元素,并且仅占用其子元素文本的宽度。阻止您将它们隔开。
The trick to this is overriding Angular materials .mat-card-header-text
to be 100% the width of the mat-card-header
. Otherwise it behaves like in inline element and only takes up the width of its children elements text. Preventing you from spacing them out.
这篇关于如何在角4中对齐左右文本mat-card-header?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!