在同一行上右对齐（mat-icon）和左对齐（text）

Question

我正在尝试将Mat-icon对准“ Betrag”所在的同一行的右侧： 我尝试设置float: right和display: inline-block，但它们不能一起使用； 有人可以帮我吗？

这是HTML

 <mat-accordion>
  <mat-expansion-panel hideToggle *ngFor="let key of itemCategories">
    <mat-expansion-panel-header *ngIf="items[key].length > 0">
      <mat-panel-title>
        {{key}}
      </mat-panel-title>
      <mat-panel-description>
          {{items[key].length}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div *ngFor="let item of items[key]" (click)="openDialog(item)">
      <mat-divider></mat-divider>
      <p>
        Name: {{item?.name}}<br>
        Betrag: {{item?.price}} 
        <button mat-icon-button  (click)="downloadPdf()">
          <mat-icon color="primary">arrow_circle_down</mat-icon>
        </button>
      </p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

我的scss：

mat-panel-description {
  align-items: center;
  justify-content: flex-end;
}

p{
  cursor: pointer;
}

.mat-icon-button{
  float: right;
  clear: both
}

我不明白为什么它在下边缘/下一行，并且比使用float属性有更好的方法吗？

感谢您的帮助！

Answer 1

您尝试制作容器flexbox吗？

mat-expansion-panel > div{
    display:flex;
}
.mat-icon-button{
    justify-self: end;
}