在 Angular Js 导航栏中将项目向右对齐答案

【问题标题】：Align item to the right in the Angular Js navbar在 Angular Js 导航栏中将项目向右对齐
【发布时间】：2015-08-22 08:16:39
【问题描述】：

我正在使用 Angular Js Material，但无法向右对齐以下内容（下图中红色部分）

下面是导航栏代码：

<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>

特别是，我想调整以下内容：

<i class="material-icons md-48">question_answer</i>

<i class="material-icons md-48">help_outline</i>

我已经尝试将它们文本对齐到右侧并尝试使用浮动右侧，但这些尝试似乎都没有奏效。此导航栏基于this Angular template。

任何帮助将不胜感激。

提前致谢

【问题讨论】：

我不熟悉 Angular Material，尽管通过演示工具栏查看您可能缺少类“md-default-theme”。打开我们的检查器并检查“基本用法”工具栏演示中使用的类是值得的。 material.angularjs.org/latest/#/demo/…
感谢您的建议导致了解决方案。在您提供的网址中，我注意到左右分开的是以下内容“”
干得好！我很高兴这有帮助。检查员会很有帮助。

标签： javascript html css angularjs material-design

【解决方案1】：

在您开始在 md 工具栏中添加链接/图标之前，只需输入 <span flex></span>！像这样：

<md-toolbar>
  <span flex> </span>
  <md-button> Button Right </md-button>
</md-toolbar>

【讨论】：

简单高效！
我在问这是否是最好的方法，或者也许有更好的方法。无论如何，它有效！

【解决方案2】：

一旦您定义了布局类型，在您的例子中 layout="row"，该范围内的项目将由 layout-align 对齐。在您的情况下，您可以使用：

layout-align="start end"

所以，你的代码应该是：

<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>

我不知道你为什么使用 div 类 md-toolbar-tools。

【讨论】：