角度材質對齊菜單正確

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>