如何将三个图标对齐到页面标题的右侧

时间:2016-12-15 07:35:37

标签: html css angularjs css3 angular

我有目前的情况:

enter image description here

相关代码:


_________________________________________________________
|var30   |var31   |var32   |var33  |var34  |var35 |var36|
--------------------------------------------------------
|-0.00586|0.13821 |0       |       |1      |      |     |
|3.87635 |2.86702 |2.51963 |8      |11     |2     |14   |
|3.78279 |2.54833 |2.45881 |       |2      |      |     |
|-0.10092|0       |0       |1      |1      |3     |1    |
|8.08797 |6.14486 |5.25718 |       |5      |      |     |
---------------------------------------------------------

But when i run result.show() command i am able to see the values.

_________________________________________________________
|var30   |var31   |var32   |var33  |var34  |var35 |var36|
--------------------------------------------------------
|-0.00586|0.13821 |0       |2      |1      |1     |6    |
|3.87635 |2.86702 |2.51963 |8      |11     |2     |14   |
|3.78279 |2.54833 |2.45881 |2      |2      |2     |12   |
|-0.10092|0       |0       |1      |1      |3     |1    |
|8.08797 |6.14486 |5.25718 |20     |5      |5     |34   |
---------------------------------------------------------

我只想让3个图标彼此紧密相邻并向右对齐。如果我将<md-toolbar color="primary" class="main-toolbar"> <div fx-layout="row" fx-flex fx-layout-align="space-between"> <span class="page-headline"> <img class="logo" src="./logo.png"/>club </span> <button md-icon-button class="main_menu_button1" (click)="dinnerClicked()"> <md-icon>local_pizza</md-icon> </button> <button md-icon-button class="main_menu_button2" (click)="notificationsClicked()"> <md-icon>notifications</md-icon> </button> <button md-icon-button class="main_menu_button3" (click)="eventsClicked()"> <md-icon>event_note</md-icon> </button> </div> </md-toolbar> 更改为fx-layout-align,我几乎可以得到我想要的内容:

enter image description here

但是向左而不是向右......

我尝试了很多CSS配置,但没有一个对我有用,有没有简单的方法来实现这一点?非常感谢。

2 个答案:

答案 0 :(得分:3)

如果您使用此插件:enter image description here

我建议:

<md-toolbar color="primary" class="main-toolbar">
  <div fx-layout="row" fx-flex fx-layout-align="end" >
    ...
  </div>
</md-toolbar>

答案 1 :(得分:0)

只需在css中添加以下代码:

    signInButton.style = .IconOnly
    signInButton.style = .Standard
    signInButton.style = .Wide