mat-expansion-description的样式项答案

【问题标题】：Style item of mat-expansion-descrptionmat-expansion-description的样式项
【发布时间】：2020-11-06 03:26:03
【问题描述】：

我在对齐描述“摘要”时遇到问题，或者更具体地说，我想在面板右端的面板标题中显示我的项目编号。

这是我已经尝试过的：

.mat-expansion-panel-header-description {
    flex-grow: 2;
    text-align: end; /*also tried "right"*/
}

我也尝试将这些属性应用于我的摘要类，但没有任何效果，它们不会像我的屏幕截图中所示那样改变它们的位置

.summary {
    text-align: right;
}

这是我的 html 标记：

<mat-expansion-panel class ="mat-header" hideToggle *ngFor="let key of itemCategories">
    <mat-expansion-panel-header class="panel-header">
      <mat-panel-title>
        {{key}}
      </mat-panel-title>
      <mat-panel-description class="summary">
        <div *ngIf="items[key].length > 0">
          {{items[key].length}}
        </div>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="panel-content" *ngIf="items[key].length > 0">
      <ng-container *ngFor="let item of items[key]">
        <!-- Alle Bereiche -->
        <!-- <ng-container *ngIf="key == 'Alle Bereiche'">
          Alle Bereiche template
        </ng-container> -->
       <div>
        Name: {{item?.name}} <br> Betrag: {{item?.price}} <hr>
       </div>
      </ng-container>
    </div>
  </mat-expansion-panel>

这是我的应用带有一些解释性标记的样子

https://snipboard.io/f1aQMi.jpg

无标记：

https://snipboard.io/f1aQMi.jpg

我想不通，这是我第一次使用 Angular 材料，有人可以告诉我我做错了什么吗？非常感谢任何帮助！

【问题讨论】：

标签： html css sass angular-material

【解决方案1】：

如果没有工作示例，很难进行调试。 justify-content: space-between 允许您在 flexbox 中分隔元素，所以也许您可以利用它：

.panel-header {
  display: flex;
  justify-content: space-between;
}

你可以看到更多关于here的信息。

这是您的用例中的一个示例：

.panel {
  width: 20rem;
  height: 3rem;
  padding: 1rem;
  border: solid thin black;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

<div class="panel">
  <div class="title">Example title</div>
  <div class="value">10</div>
</div>

【讨论】：