角度材质对齐菜单正确

Question

我有角度材质导航栏（如下所示）。我在导航栏中放置了一个MD菜单，因为我想实现在右侧有下拉菜单的引导菜单导航栏。如何移动右侧下拉菜单中的“WELCOME！IVAN”。

下面

是我的代码：

<div ng-controller="navController"> 
<md-content> 
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> 

     <md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}"> 
      <i class="fa {{ link.icon}}" aria-hidden="true"></i> 
      &nbsp;&nbsp;{{ link.link}} 
     </md-nav-item> 

     <md-menu md-offset="0 -7" layout-align="end center"> 
      <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)"> 
       Welcome! {{ user}} 
       <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>--> 
       <i class="fa fa-user" aria-hidden="true"></i> 
      </md-button> 
      <md-menu-content width="3"> 
       <md-menu-item> 
        <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button> 
       </md-menu-item> 
      </md-menu-content> 
     </md-menu> 

    </md-nav-bar> 

</md-content> 

预先感谢您的帮助！ :)

Answer 1

尝试使用类似codepen example demo的flex范围。 <span flex></span>填充元素之间的空间。

<div ng-controller="navController"> 
    <md-content> 
     <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> 
      <md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}"> 
       <i class="fa {{ link.icon}}" aria-hidden="true"></i> 
       &nbsp;&nbsp;{{ link.link}} 
      </md-nav-item> 
      <span flex></span> 
      <md-menu md-offset="0 -7" layout-align="end center"> 
       <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)"> 
        Welcome! {{ user}} 
        <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>--> 
        <i class="fa fa-user" aria-hidden="true"></i> 
       </md-button> 
       <md-menu-content width="3"> 
        <md-menu-item> 
         <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button> 
        </md-menu-item> 
       </md-menu-content> 
      </md-menu> 
     </md-nav-bar> 
    </md-content> 
</div>