角材アラインメントメニュー右

Question

私は角度材のナビゲーションバーを持っています（下記参照）。ナビゲーションバーの中にmd-menuを置くのは、右側にドロップダウンメニューがあるブートストラップナビゲーションバーを実現したいからです。右側のドロップダウンメニューである "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>