mat-expansion-descrption的样式项

Question

我在调整我的描述“摘要”时遇到了问题，或者更具体地说，我希望在面板右端的面板标题中有我的项目编号。

这是我已经尝试过的：

.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

我搞不清楚，这是我第一次使用角度材料，有人能告诉我我做错了什么吗？将非常感谢您的帮助！

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

​