如何在md-list-item中右鍵浮動md-button

Question

我無法讓我的md按鈕浮動到我的待辦事項列表的右側。我使用的角度4X和flexLayout與角料模塊

我的代碼如下：

.list-item { 
 
    width: 100%; 
 
    border-bottom: 1px solid #CCC; 
 
} 
 

 
.list-item button .material-icons { 
 
    font-size: 16px; 
 
    padding: 0; 
 

 
} 
 

 
.list-item:hover button { 
 
    display: block; 
 

 
} 
 

 
.list-item button { 
 
    display: block; 
 
    float: right; 
 
    margin: 4px 5px; 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
.list-item /deep/ .md-checkbox-label { 
 
    margin: 10px 0; 
 
}

<md-list *ngIf="todos.length > 0" class="todo-list"> 
 
       <md-list-item *ngFor="let todo of todos" fxLayout="row" class="list-item"> 
 
       <md-checkbox (click)="toggleTodoComplete(todo)" 
 
       color="primary"> 
 
        <span [class.completed]="todo.complete">{{todo.title}} </span> 
 
       </md-checkbox> 
 
        <button md-mini-fab (click)="removeTodo(todo)"> 
 
        <md-icon>delete_forever</md-icon> 
 
        </button> 
 
       
 
       </md-list-item> 
 
      </md-list>

Answer 1

嘗試增加fxLayoutAlign="space-between center"到您的MD-列表項，像這樣：

<md-list-item *ngFor="let todo of todos" fxLayout="row" fxLayoutAlign="space-between center" class="list-item"> 
     <md-checkbox (click)="toggleTodoComplete(todo)" color="primary"> 
      <span [class.completed]="todo.complete">{{todo.title}} </span> 
     </md-checkbox> 
     <button md-mini-fab (click)="removeTodo(todo)"> 
      <md-icon>delete_forever</md-icon> 
     </button>   
</md-list-item> 

另外，你可能需要刪除你現有的css爲display: block; float: right;