javascript 在 Angular Js 导航栏中将项目向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30699410/
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
Align item to the right in the Angular Js navbar
提问by John
I am working with Angular Js Material, and I am having trouble aligning to the right the following (what's in red in the image below)
我正在使用 Angular Js Material，但无法将以下内容向右对齐（下图中的红色部分）
Below is the navbar code:
下面是导航栏代码：
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>TEST</h1>
<i class="material-icons md-48">question_answer</i>
<i class="material-icons md-48">help_outline</i>
</div>
</div>
In particular, I would like to align the following:
特别是，我想调整以下内容：
<i class="material-icons md-48">question_answer</i>
<i class="material-icons md-48">help_outline</i>
I have tried text-aligning them to right and have tried using float right but none of these attempts seems to have worked. This navbar is based on this Angular template.
我试过将它们右对齐文本并尝试使用浮动右，但这些尝试似乎都没有奏效。这个导航栏基于这个 Angular 模板。
Any help would be appreciated.
任何帮助，将不胜感激。
Thanks in advance
提前致谢
回答by Milean
Simply put <span flex></span>before you start adding the Links / Icons in the md-toolbar! Like so:
只需<span flex></span>在开始在 md 工具栏中添加链接/图标之前放置即可！像这样：
<md-toolbar>
<span flex> </span>
<md-button> Button Right </md-button>
</md-toolbar>
回答by Apalabrados
Once you define the type of layout, in your case layout="row", items within that scope are aligned by layout-align. In your case you can use:
定义布局类型后，在您的情况下 layout="row"，该范围内的项目由layout-align 对齐。在您的情况下，您可以使用：
layout-align="start end"
So, you code should be:
所以，你的代码应该是：
<md-toolbar layout="row" layout-align="start end">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>TEST</h1>
<i class="material-icons md-48">question_answer</i>
<i class="material-icons md-48">help_outline</i>
</div>
I do not know why you are using the div class md-toolbar-tools.
我不知道你为什么使用 div 类 md-toolbar-tools。
