CSS 使用 Angular Material，是否可以在同一行中将一个按钮向左对齐，另一个向右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33351054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Angular Material, is it possible to align one button to the left and another to the right, in the same row?
提问by Tiago
According to Angular Material's documentation on alignment:
The layout-align attribute takes two words. The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.
layout-align 属性需要两个字。第一个词表示子项如何在布局方向上对齐，第二个词表示子项如何垂直于布局方向对齐。
I used this to create the button section that you can see on the picture below:
我用它来创建按钮部分，您可以在下图中看到：
With the following code:
使用以下代码：
<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>
However, I wanted the Submitbutton to be left-aligned, and all the others right-aligned. Is there a correct way of doing this with Angular Material or will I just have to create my own styles?
但是，我希望Submit按钮左对齐，所有其他按钮右对齐。是否有使用 Angular Material 执行此操作的正确方法，还是我只需要创建自己的样式？
回答by Sajeetharan
You can do so with the help of a divand layout-align, here is the code:
你可以在 a divand的帮助下做到这一点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>
And a working Plunker.
和一个工作Plunker。
回答by marcoooo
You can also use
你也可以使用
layout-align="space-between center"
See this exemple : https://material.angularjs.org/latest/demo/panel(Last exemple)
见这个例子：https: //material.angularjs.org/latest/demo/panel（最后一个例子）
回答by jean ECARD
"space-between center"works with Angular V5 and angular/flex-layout.
You will have to use it as: fxLayoutAlign = "space-between center".
"space-between center"适用于 Angular V5 和 angular/flex-layout。您必须将其用作：fxLayoutAlign = "space-between center"。
