2016-04-25 11 views
5

角度のある素材を使用しています。私は正常にナビゲーションバーとドロップダウンメニューを作成しました。角の材料を左に移動するドロップダウンメニュー

それは次のようになります。

angular material nav

私は左側へDROPDOWNを移動したいと思います。今、それは中心の周りに現れます。

HTMLコード:コードは単なるテキストMaterial NavBarの横に左にDROPDOWNを移動するように変更することができますどのように

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

答えて

3

コードに<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

+0

私は悪い方向に、**左** ...;)する必要がありますフレックスメニューの後に追加 – Aziz

+1

私の悪い。もう一度チェック。 – nextt1

+0

そのような単純な解決策、まだ私はかなりの時間のために立ち往生した。天才! –

関連する問題