如何在角度 4 中对齐左右文本 mat-card-header? [英] How to align left and right text mat-card-header in angular 4?

问题描述

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

 
<垫卡><mat-card-header class="card-container"><mat-card-title class="card-container-right">测试权限</mat-card-title><mat-card-title class="card-container-left">测试左侧</mat-card-title></mat-card-header><mat-card-content></mat-card-content></mat-card>

解决方案

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

参见StackBlitz 示例

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

<mat-card-header><mat-card-title class="card-container-left">测试左侧</mat-card-title><mat-card-title class="card-container-right">测试权限</mat-card-title></mat-card-header><mat-card-content></mat-card-content>

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

.card-container-right{显示:内联；浮动:对；}.card-container-left{显示:内联；}

..最后在你的 styles.css

.mat-card-header-text{宽度:100%！重要；}

解决这个问题的诀窍是将 Angular 材质 .mat-card-header-text 覆盖为 mat-card-header 宽度的 100%.否则它的行为就像内联元素一样，只占用其子元素文本的宽度.防止您将它们分开.

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:

See working StackBlitz Example

In your (I'll call it) example-card.component.html file

<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>

Then in your example-card.component.css

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

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

..and finally in your styles.css

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

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屋！