如何在md-list-item中正确浮动md按钮

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-list-item中，如下所示：

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

此外，您可能需要删除display: block; float: right;

的现有CSS