Sposta menu a discesa materiale angolare a sinistra

Question

Sto usando materiale angolare. Ho creato con successo una barra di navigazione e un menu a discesa.

Ecco come si presenta:

Vorrei spostare la DROPDOWN al lato sinistro. Ora, appare intorno al centro.

codice 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> 

Come può il codice essere modificato per spostare DROPDOWN a sinistra proprio accanto al testo Material NavBar?

Answer 1

Hai solo bisogno di aggiungere <span flex> </span> nel codice.

<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> 

Ecco un esempio di lavoro. http://codepen.io/next1/pen/RaYNxw