md-list-icon 或 md-button 向右对齐？（角材料 2）答案

【问题标题】：md-list-icon or md-button aligned to right? (Angular Material 2)md-list-icon 或 md-button 向右对齐？（角材料 2）
【发布时间】：2017-05-03 13:34:32
【问题描述】：

如何使按钮/图标/复选框像材料 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>

【问题讨论】：

嗯，Angular 不是还在使用 CSS 进行自定义吗？这意味着这是一个简单的float: right;
float:right 不起作用...玩了一会儿我想出了一个解决方案，我一会儿贴出来

标签： angular angular-material2

【解决方案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>

【讨论】：

你的意思是省略md-list-icon！？ ;)
@srokatonie 介意接受答案吗？为了以防万一，我不得不扫描所有其他答案。

【解决方案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>

【讨论】：

【解决方案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>

它对我有用，什么时候我因为之前没有弄清楚而对自己生气

【讨论】：

【解决方案4】：

您也可以通过 dir 属性实现此目的

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

【讨论】：

这是一个糟糕的解决方案。请注意，如果您使用多个图标（如示例图像所示），图标将以相反的顺序结束。此外，屏幕阅读器可能会以错误的顺序读出控件。不要这样做。 dir="rtl" 设计用于内容将被解释为右边的项目在逻辑上优先的情况，而不是用于视觉上重新排列事物。
我同意朱尔斯的观点。这不是解决此类问题的正确方法。