gpt4 book ai didi

html - 如何以 Angular 4 对齐左右文本 mat-card-header?

转载 作者:太空狗 更新时间:2023-10-29 17:43:37 25 4
gpt4 key购买 nike

我需要对齐header标签左右两侧header中的文本内容。我尝试了不同的想法,但没有一个对我有用。帮助我。

 <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 元素,你也可以这样做:

查看工作 StackBlitz Example

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

这样做的技巧是覆盖 Angular Material .mat-card-header-text 使其成为 mat-card-header 宽度的 100%。否则它的行为就像在内联元素中一样,只占用其子元素文本的宽度。防止您将它们隔开。

关于html - 如何以 Angular 4 对齐左右文本 mat-card-header?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52008662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com