md-list-icon或md-button对齐？ （角度材料2）

Question

如何使按钮/图标/复选框与材料1中的右侧对齐：

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

我目前（材料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> $2.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

实际上，mat-list使用弹性框。您可以使用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 3

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

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

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

Answer 4

您也可以使用 dir 属性

来实现此目的

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;