對齊項目在角JS導航欄

我有角的js材料工作的權利，我有（下圖中什麼紅）麻煩對準右側下面 enter image description here 對齊項目在角JS導航欄

下面是導航欄代碼：

<md-toolbar layout="row"> 
     <div class="md-toolbar-tools"> 
     <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button"> 
      <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon> 
     </md-button> 

     <h1>TEST</h1> 
     <i class="material-icons md-48">question_answer</i> 
     <i class="material-icons md-48">help_outline</i> 
     </div> 
    </div>

我特別想對齊以下幾點：

<i class="material-icons md-48">question_answer</i> 

    <i class="material-icons md-48">help_outline</i>

我已經試過他們的文本對齊到右，有線索d使用float權，但這些嘗試似乎都沒有奏效。此導航欄基於角模板在這裏： https://material.angularjs.org/latest/#/getting-started

任何幫助，將不勝感激。

在此先感謝

來源

2015-06-07 John

我對Angular Material不熟悉，雖然通過演示工具欄查看可能缺少class'md-default-theme'。值得打開我們的檢查員並檢查「基本用法」工具欄演示中使用的類。 https://material.angularjs.org/latest/#/demo/material.components.toolbar –

感謝您的建議導致瞭解決方案。在你提供的網址中，我注意到左邊和右邊分別是下面的「」 – John

很好地完成了！我很高興幫助。檢查員可以非常有幫助。 –

簡而言之<span flex></span>你開始增加的MD-工具欄中的鏈接/圖標之前！像這樣：

<md-toolbar> 
    <span flex> </span> 
    <md-button> Button Right </md-button> 
</md-toolbar>

來源

2015-11-21 19:00:01 Milean

簡單而高效！ – Shantanu

我在問這是否是最好的方法，或者有更好的方法。無論如何，它的作品！ – jBaumann

一旦你定義的佈局類型，你的情況佈局=「行」，在該範圍內的項目由佈局對齊對齊。你的情況，你可以使用：

layout-align="start end"

所以，你的代碼應該是：

<md-toolbar layout="row" layout-align="start end"> 
    <div class="md-toolbar-tools"> 
    <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button"> 
     <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon> 
    </md-button> 

    <h1>TEST</h1> 
    <i class="material-icons md-48">question_answer</i> 
    <i class="material-icons md-48">help_outline</i> 
    </div>

我不知道你爲什麼會使用div類MD-工具欄中的工具。

來源

2016-02-19 15:36:41 Apalabrados

對齊項目在角JS導航欄

回答

相關問題