Перемещение углового материала Выпадающее меню слева

Question

Я использую угловой материал. Я успешно создал навигационную панель и выпадающее меню.

Это выглядит следующим образом:

Я хотел бы переместить DROPDOWN на левой стороне. Теперь он появляется вокруг центра.

HTML код:

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;"> 
    <h2>Material NavBar</h2> 
    <md-menu> 
     <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button> 
     <md-menu-content width="2"> 
      <md-menu-item> 
       <md-button>Help</md-button> 
      </md-menu-item> 
      <md-menu-item> 
       <md-button>About</md-button> 
      </md-menu-item> 
     </md-menu-content> 
    </md-menu> 
    <md-button aria-label="Go Back"> 
     Go Back 
    </md-button> 
    <md-button>Item 1</md-button> 
    <md-button>Item 2</md-button> 
</md-toolbar> 

Как код будет изменен, чтобы переместить DROPDOWN влево только рядом с текстом Material NavBar?

Answer 1

Вам просто нужно добавить <span flex> </span> в свой код.

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px"> 
<h2>Material NavBar</h2> 
<md-menu> 
    <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button> 
    <md-menu-content width="2"> 
     <md-menu-item> 
      <md-button>Help</md-button> 
     </md-menu-item> 
     <md-menu-item> 
      <md-button>About</md-button> 
     </md-menu-item> 
    </md-menu-content> 
</md-menu> 
<span flex></span> 
<md-button aria-label="Go Back"> 
    Go Back 
</md-button> 
<md-button>Item 1</md-button> 
<md-button>Item 2</md-button> 

Вот рабочий пример. http://codepen.io/next1/pen/RaYNxw