在Angular Js导航栏中将项目对齐到右侧

Question

我正在使用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>

我尝试将它们右对齐并尝试使用向右浮动，但这些尝试似乎都没有起作用。此导航栏基于此Angular模板。

如果有任何帮助将不胜感激。

提前致谢。

- code_legend

---

我对Angular Material不熟悉，但是通过查看演示工具栏，您可能会缺少'class' md-default-theme'。值得打开我们的检查器并检查“基本用法”工具栏演示中使用的类。https://material.angularjs.org/latest/#/demo/material.components.toolbar - Jon Edwards

感谢您的建议，已经帮助找到了解决方案。在您提供的网址中，我注意到左右两侧之间分隔的内容是"<span flex></span>"。 - code_legend

干得好！我很高兴能帮上忙。检查器非常有用。 - Jon Edwards

Answer 1

简单来说，在向 md-toolbar 中添加链接 / 图标之前，只需在其前面添加 <span flex></span>！就像这样：

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

- Milean

---

简单而高效！ - Shantanu

我想知道这是否是最好的方法，或者说可能有更好的方法。不管怎么样，它能正常运行！ - Baumannzone

Answer 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 class md-toolbar-tools。

- Apalabrados