각도 재료 맞춤 메뉴 오른쪽

Question

각도 재료 탐색 막대 (아래 참조)가 있습니다. 오른쪽에 드롭 다운 메뉴가있는 부트 스트랩 탐색 모음을 만들려고하기 때문에 nav-bar 안에 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>