md-list-icon 或 md-button 右对齐？ (Angular Material 2)

Question

如何使 buttons/icons/checkboxes 像 Material 中那样右对齐 1:

https://material.angularjs.org/latest/demo/list

我目前（Material 2）有：

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Answer 1

对于上述内容，解决方案非常简单，只需在您的选择器中省略 mat-list-icon，Material 就会发挥作用：

<mat-list>
  <mat-list-item *ngFor="let position of cart">
    <h3 mat-line> {{ position.name }} </h3>
    <p mat-line>
      <span> Line 1 </span>
    </p>
    <div> .00 </div>
    <button mat-icon-button (click)="remove(1)">
      <mat-icon class="mat-24">delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

Answer 2

您也可以使用 dir 属性实现此目的

<md-list dir="rtl">
  ...
</md-list>

Answer 3

其实mat-list使用的是flex box。您可以使用 CSS 属性 'order' 单独订购商品。只需为订单使用足够大的数字

md-icon[md-list-icon]{
  order: 10;
}

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Answer 4

如果有人像我一样遇到同样的问题并且建议的解决方案没有奏效，请试试这个：

.icon-class {
    margin-left: auto;
}

<mat-list>
   <mat-list-item>
      {{"Im just a filler"}}
      <mat-icon class="icon-class">
          fiber_manual_record
      </mat-icon>
      <mat-divider></mat-divider>
    </mat-list-item>
<mat-list>

它对我有用，当它起作用时，我因为之前没有弄清楚而生自己的气

md-list-icon 或 md-button 右对齐？ (Angular Material 2)

md-list-icon or md-button aligned to right? (Angular Material 2)

angular-material2

angular