如何在 Material Design 中将按钮移动到容器的右侧

Question

我想让一个按钮移动到容器的右侧，尝试了几种方法却无法实现，不知为何style="float: right;"不起作用。也许这与Material设计无关，我对前端开发没有经验。

---

 <md-toolbar color="primary">
    <span><md-icon>mood</md-icon></span>

    <span>Material in Angular 2!</span>

    <button md-icon-button style="float: left;" [md-menu-trigger-for]="menu">
      <md-icon style="float: left;">more_vert</md-icon>
    </button>
  </md-toolbar>

---

<button md-icon-button style="float: right;" [md-menu-trigger-for]="menu">
      <md-icon style="float: right;">more_vert</md-icon>

我想将它移到这里。对不起，我的英语不好，希望你能理解我。

- Angel Angel

Answer 1

您遗漏了文本中的 <span> 类，这时它无法填充空间。请您参考以下示例:

点击此处查看完整示例。

.example-fill-remaining-space {
  // This fills the remaining space, by using flexbox. 
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;
}

<md-toolbar color="primary">
  <span>Application Title</span>

  <!-- This fills the remaining space of the current row -->
  <span class="example-fill-remaining-space"></span>

  <span>Right Aligned Text</span>
</md-toolbar>

- aaron-bond

---

感谢您的时间，我现在感觉很愚蠢，而解决方案就在文档中。 - Angel Angel

当容器不是md-toolbar时，我该如何将一个按钮移动到Material Design容器的右侧？ - cs_pupil

你仍然可以使用flex。查看容器的display: flex和子元素的flex: 1 1 auto，以填充像上面示例中的空间。 - aaron-bond

{btsdaf} - nothingisnecessary

@nothingisnecessary 你做你自己。 - aaron-bond