Flexlayout увеличивает высоту кнопки материала

У меня есть следующий html, но это увеличивает размер кнопки. Как сделать, чтобы кнопка не росла в высоту?

  <div fxLayout="row">
    <h5>User Management</h5>
    <span fxFlex></span>
    <button mat-raised-button color="primary">Create</button>
  </div>

введите здесь описание изображения


angular-material angular-flex-layout
person Saurabh Kumar    schedule 04.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решение с директивой fxLayoutAlign

Самый простой способ — использовать директиву fxLayoutAlign для вашего элемента div как показано ниже.

<div fxLayout="row" fxLayoutAlign="center center">
  ... 
</div>

Решение с помощью CSS

Проблема в вашем HTML-шаблоне заключается в том, что элемент h5 является самым высоким элементом, а все остальные элементы в строке имеют одинаковую высоту. Одним из возможных решений является удаление верхнего и нижнего полей элемента h5 с помощью CSS.

h5 {
  margin-top: 0;
  margin-bottom: 0;
}

Если на той же странице есть другие элементы h5, которые нельзя изменять, вам необходимо определить определенный класс CSS для элемента h5, который появляется в строке flex (его можно назвать «h5-inline»).

.h5-inline {
  margin-top: 0;
  margin-bottom: 0;
}

Тогда HTML-шаблон будет выглядеть следующим образом.

<div fxLayout="row">
  <h5 class="h5-inline">User Management</h5>
  <span fxFlex></span>
  <button mat-raised-button color="primary">Create</button>
</div>
person uminder    schedule 05.01.2020