Как разместить md-кнопку прямо внутри md-list-item

У меня возникают проблемы с перемещением моей кнопки MD справа от моего списка дел. Я использую angular 4x и flexLayout с модулем материала angular

Элемент списка Todo

Мой код выглядит следующим образом:

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


angular angular-material2 angular-flex-layout
person David Leslie    schedule 06.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить 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>

Кроме того, вам может потребоваться удалить существующий CSS для display: block; float: right;

person Andrei Matracaru    schedule 06.09.2017
comment
Спасибо, Андрей, к сожалению, эффекта пока нет. Кнопка по-прежнему выравнивается рядом с флажком - person David Leslie; 07.09.2017