angular – 如何在Material设计中将按钮移动到容器的右侧

发布时间：2020-12-17 17:51:33 所属栏目：安全来源：网络整理

导读：我试图让一个按钮移动到容器的右侧,我使用了几种形式,但是我无法得到它,不知怎的样式=“float：right;” 也许这不是一件事,材料设计,我没有前端开发的经验. md-toolbar color="primary" spanmd-iconmood/md-icon/span spanMaterial in Angular 2!/span butto

我试图让一个按钮移动到容器的右侧,我使用了几种形式,但是我无法得到它,不知怎的样式=“float：right;”

也许这不是一件事,材料设计,我没有前端开发的经验.

enter image description here

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

enter image description here

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

我想把它移到这里.我很抱歉我的英语不好.我希望你能理解我.

enter image description here

解决方法

您错过了文字< span>上的课程它允许它填补空间：

See full example here.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!