Flexlayout 使 material 按钮的高度变大

Question

我有以下 html 但这会使按钮变大。如何让按钮不长高？

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

Answer 1

使用 fxLayoutAlign 指令的解决方案

最简单的方法是在 div 元素上使用 fxLayoutAlign 指令，如下所示。

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

解决方案 CSS

您的 HTML 模板中的问题是 h5 元素是最高的元素，并且该行中的所有其他元素都以相同的高度布置。一种可能的解决方案是使用 CSS.

从 h5 元素中删除顶部和底部边距

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

如果同一页面上有其他 h5 元素不能更改，则需要为 h5 元素定义特定的 CSS class出现在 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>

Flexlayout 使 material 按钮的高度变大

Flexlayout make material button bigger in height

angular-material

angular-flex-layout