对齐项目在角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导航栏

回答

相关问题