AngularJS - 在md-menu-bar中对齐右边的md按钮

Question

我是Angular的新手，我研究了这个，但我还是无法解决这个问题。

我需要我的VTS Anketa按钮是正确的，而所有其他按钮都是左对齐的。

以下是代码：

<md-toolbar layout="row" flex="1">
  <md-menu-bar>
    <md-menu>
      <md-button ng-href="/#/">Home</md-button>
    </md-menu>
    <md-menu>
      <md-button ng-href="/#/create">Napravi anketu</md-button>
    </md-menu>
    <md-menu>
      <md-button ng-href="/#/view">Pogledaj anketu</md-button>
    </md-menu>
    <md-menu>
       <md-button layout-align="right" ng-href="/#/delete" ng-click="delete()"> Izbrisi anketu</md-button>
    </md-menu>
    <md-menu>
      <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button>
    </md-menu>
  </md-menu-bar>
</md-toolbar>

  

我尝试在md-button和md-menu之前添加span flex，但是按钮只是消失了：

<md-menu>
   <span flex></span>
     <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button>
</md-menu>

结果：

另外，我尝试在标记中添加一个id，然后在css中调用该id并使用text-align：right;，这也没有做任何事情。

Answer 1

将flex添加到md-menu-bar并将float：right添加到id moveright

<md-menu-bar flex>
    <md-menu>
      <md-button ng-href="/#/">Home</md-button>
    </md-menu>
    <md-menu>
      <md-button ng-href="/#/create">Napravi anketu</md-button>
    </md-menu>
    <md-menu>
      <md-button ng-href="/#/view">Pogledaj anketu</md-button>
    </md-menu>
    <md-menu>
       <md-button ng-href="/#/delete" ng-click="delete()"> Izbrisi anketu</md-button>
    </md-menu>
    <md-menu >
      <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button>
    </md-menu>
  </md-menu-bar>

的CSS：

#moveright {
  float: right;
}

这是因为md-menu-bar在工具栏中有最大宽度，所以你必须将它一直弯曲为工具栏的宽度，以便你可以在项目周围移动。

请参阅codepen：https://codepen.io/anon/pen/WjxwNZ

Answer 2

我创建了一个不同的工具栏，并使用了这样的跨度布局：

<md-toolbar layout="column">

  <span layout="row" layout-padding>
  <h2 class="md-toolbar-tools" style="font-family: Trebuchet MS;"> VTŠ Anketa</h2>

  <md-button ng-href="/#/" id="movebottom">Glasaj</md-button>
  <md-button ng-href="/#/create">Napravi</md-button>
  <md-button ng-href="/#/view">Pogledaj</md-button>
  <md-button ng-href="/#/delete" ng-click="delete()"> Izbriši</md-button>
  </span>
</md-toolbar>