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

Question

我正在尝试将我的垫子图标对齐在“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;
}