如何将我的标签与 angular material 中的按钮对齐？

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;
    }
   }
  }
 }
}

如果我尝试将 class 添加到带有填充或边距的垫子图标，它总是随文本移动并弄得一团糟。有什么想法吗？

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>

如何将我的标签与 angular material 中的按钮对齐？

How to align my label with my button in angular material?

grid

styles

list

typescript

angular