如何将我的标签与角材料中的按钮对齐？答案

【问题标题】：How to align my label with my button in angular material?如何将我的标签与角材料中的按钮对齐？
【发布时间】：2020-03-10 20:52:50
【问题描述】：

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

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>
[...]

文字：

.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 添加一个类，它总是随着文本移动并弄得一团糟。有什么想法吗？

【问题讨论】：

标签： angular typescript list grid styles

【解决方案1】：

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

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

【讨论】：

它不是实体按钮，它是列表的标题标题，仅用于按 asc/desc 排序。
我已经更新了我的答案。我注意到您将图标放在 span 元素内。有什么理由吗？
嗯，让我想想……不：D 现在没关系，谢谢。