如何在角形材料中将标签与按钮对齐？

Question

我有一个简单的问题-无法将我的按钮与文本对齐。现在看起来像这样：

HTML：

[...]
<mat-grid-list cols="16" rowHeight="30px" class="explorer-list-row-title">
 <div>
  <mat-grid-tile 
   *ngFor="let tile of tiles" 
   [colspan]="tile.cols" 
   [rowspan]="tile.rows" 
   [class]="tile.class" 
   (click)="sortOnClick(tile)"
  >
   <span class="explorer-list-row-title-text">
    {{tile.text}}
    <mat-icon>
     {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
    </mat-icon>
   </span>
  </mat-grid-tile>
 </div>
</mat-grid-list>
[...]

Scss：

.explorer {
 padding-top: 7px;
 padding-left: 16px;

 &-list {

  &-position {
   margin-left: -16px; //TODO fix
   margin-top: -7px; //TODO fix
   margin-right: -16px; //TODO fix
  }

  &-row {

   &-title {
    border-bottom: 1px solid grey;

    &-text {
     padding-bottom: 8px;
    }
   }
  }
 }
}

如果我尝试使用填充或边距将类添加到mat-icon，则它总是随着文本移动并弄得一团糟。有什么想法吗？

Answer 1

如果希望它们对齐，只需将图标移到span元素之外即可。

 <span class="explorer-list-row-title-text">
    {{tile.text}}
 </span>
 <mat-icon>
    {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
 </mat-icon>