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

Question

我有目前的情况：

相关代码：

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

我只希望 3 个图标彼此紧密相邻并向右对齐。如果我将fx-layout-align 更改为fx-layout-align-xs，我几乎得到了我想要的：

但是在左边而不是在右边...

我尝试了许多 CSS 配置，但没有一个对我有用，有什么简单的方法可以实现这一点吗？非常感谢。

Answer 1

只需在您的 css 中添加以下代码：

<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
    float:right;
}
</style>

Answer 2

如果你使用这个插件：https://github.com/angular/flex-layout#api-overview

我建议：

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