使用 Angular Material，是不是可以在同一行中将一个按钮向左对齐，另一个按钮向右对齐？

Posted 2023-03-06

【中文标题】使用 Angular Material，是不是可以在同一行中将一个按钮向左对齐，另一个按钮向右对齐？

【英文标题】：Using Angular Material, is it possible to align one button to the left and another to the right, in the same row?使用 Angular Material，是否可以在同一行中将一个按钮向左对齐，另一个按钮向右对齐？

【发布时间】：2016-01-25 20:46:23

【问题描述】：

根据Angular Material's documentation on alignment：

layout-align 属性需要两个词。第一个字说如何 孩子将在布局的方向上对齐，第二个 单词说孩子将如何垂直于 布局的方向。

我用它来创建如下图所示的按钮部分：

使用以下代码：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <md-button class="md-primary">Submit</md-button>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

但是，我希望 Submit 按钮左对齐，而所有其他按钮右对齐。是否有使用 Angular Material 的正确方法，还是我只需要创建自己的样式？

【参考方案1】：

这适用于最新的 Angular。

如果你想将多个按钮左对齐或右对齐，你可以简单地用 div 组合按钮。

例如，当您将 Prev 和 Next 按钮放在左侧，将关闭按钮放在右侧时，

<section fxLayout fxLayoutAlign="space-between center">
   <div>
      <button mat-button>Prev</button>
      <button mat-button>Nex</button>
    </div>
    <button mat-button cdkFocusInitial mat-dialog-close>Close</button>
</section>

【参考方案2】：

"space-between center" 适用于 Angular V5 和 angular/flex-layout。 您必须将其用作：fxLayoutAlign = "space-between center"。

【讨论】：

我认为这是目前最好的答案。它有效而且很短。

【参考方案3】：

你也可以使用

layout-align="space-between center"

见这个例子：https://material.angularjs.org/latest/demo/panel （最后一个例子）

【讨论】：

仅适用于 angularjs (v1) 材料，不适用于 Angular (v2+)

【参考方案4】：

您可以在 div 和 layout-align 的帮助下这样做，代码如下：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <div layout="row" layout-align="start center" flex>
    <md-button class="md-primary">Submit</md-button>
    <span flex></span>
  </div>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

还有一个工作的Plunker。

【讨论】：

如果包裹在 md-toolbar 中，这似乎不起作用。

您的 plunker 中的按钮位于彼此下方。问题问“一左一右”。我不明白这有什么帮助。

我也是这么想的，但是如果你去全屏预览，那就对了。这是因为“layout-sm”设置为“column”，但“layout”设置为“row”。基本上，如果屏幕不够大，它会显示为列，否则 - 行。