如何使用angular4在右上角显示一个按钮

Question

我有一个菜单栏，我正在获取这样的菜单按钮

但我需要菜单栏看起来像这样

我尝试按下按钮但我在菜单栏中滚动，但是我需要将按钮侧放在菜单栏上。

HTML：

<mat-drawer-container class="sidnav-container" autosize [class.moveLeft]="showSidenavTitle">
<mat-drawer #drawer  *ngIf="showNav" class="sidnav-sidenav" mode="side" opened="true" [ngStyle]="{ 'width.px': sidenavWidth }">
  <button (click)="changeWidth()" mat-mini-fab><img src="../../assets/images/menu.png"></button>
  <mat-list class="wd_logo" [class.decreaseLogo]="!showSidenavTitle">
    <img src="../../assets/images/logo_white.png">
    <span *ngIf="showSidenavTitle">WIREDELTA</span>
  </mat-list>
  <mat-divider></mat-divider>
  <mat-list>
    <h3 mat-subheader *ngIf="showSidenavTitle">User</h3>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/tracking" matTooltip="Tracking">
                <i class="fa fa-hourglass-half" aria-hidden="true"></i> <span *ngIf="showSidenavTitle">Tracking</span>
            </a>
    </mat-list-item>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/history" matTooltip="History">
                <i class="fa fa-clock-o" aria-hidden="true"></i><span *ngIf="showSidenavTitle">History</span>
            </a>
    </mat-list-item>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/account" matTooltip="Account">
                <i class="fa fa-user" aria-hidden="true"></i> <span *ngIf="showSidenavTitle">Account</span>
            </a>
    </mat-list-item>
    <mat-divider></mat-divider>
    <h3 mat-subheader *ngIf="showSidenavTitle">Project</h3>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/projectHistory" matTooltip="ProjectHistory">
                <i class="fa fa-clock-o" aria-hidden="true"></i> <span *ngIf="showSidenavTitle">History</span>
            </a>
    </mat-list-item>
    <mat-divider></mat-divider>
    <h3 mat-subheader *ngIf="showSidenavTitle">Admin</h3>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/department" matTooltip="Department">
        <mat-icon svgIcon="hierarchy"></mat-icon> <span *ngIf="showSidenavTitle">Department</span>
      </a>
    </mat-list-item>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/users" matTooltip="Users">
                <i class="fa fa-users" aria-hidden="true"></i> <span *ngIf="showSidenavTitle">Users</span>
            </a>
    </mat-list-item>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/projects" matTooltip="Projects">
        <mat-icon svgIcon="coding"></mat-icon> <span *ngIf="showSidenavTitle">Projects</span>
      </a>
    </mat-list-item>
    <mat-list-item routerLinkActive="activeTab">
      <a routerLink="/userAccess" matTooltip="UserAccess">
        <mat-icon svgIcon="key"></mat-icon> <span *ngIf="showSidenavTitle">User Access</span>
      </a>
    </mat-list-item>
  </mat-list>
</mat-drawer>
<router-outlet></router-outlet>
<div class="profileDiv"></div>

SCSS：

   .main {
  height: 100%;
  width: 100%;
  position: absolute;
  mat-drawer-container {
    height: 100%;
    .mat-drawer {
      position: fixed;
      height: 100%;
      background: linear-gradient(#72D2BD, #4D75B1);
      transition: width .3s !important;
      box-shadow: 3px 0px 15px 2px rgba(199, 212, 193, 1);
      button {
        position: absolute;
        background: none;
        right: 0px;
      }
      .wd_logo {
        text-align: center;
        padding: 20px 0px 15px 0px;
        img {
          width: 75px;
          height: 45px;
        }
        span {
          font-size: 24px;
          color: $white;
          vertical-align: bottom;
          line-height: 20px;
          font-family: MontserratRegular;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 185px;
          display: inline-block;
        }
      }
      mat-divider {
        border-top-color: #579aa4;
        padding: 8px 0px;
      }
      .mat-subheader {
        font-family: MontserratRegular;
        font-size: 22px;
        color: $white;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding-left: 30px;
      }
      .mat-list-item {
        margin: 0px 15px;
        transition: all 0.15s;
        &:hover {
          @include awesome;
          a {
            span,
            i {
              @include spanClass;
            }
          }
        }
        a {
          display: flex;
          i,
          mat-icon {
            color: $white;
            font-size: 18px;
            padding-right: 10px;
            line-height: 24px;
          }
          span {
            font-family: montserratLight;
            font-size: 18px;
            color: $white;
          }
        }
      }
    }

这是我的完整代码，我尝试通过正确的方式和所有，但我得到一个滚动条但我需要按钮放置，请帮助

Answer 1

您要做的是将父元素设置为relative的位置，然后当您为按钮指定位置absolute时，它将绝对定​​位到菜单栏

所以例如......

.menu-bar{
  width: 100px;
  position: relative;
}

button{
  position: absolute;
  right: -20px; // May be different just a guess
  top: calc(50% - 15px); // This will center it vertically
}

您要做的是将正确的位置设置为-然后您将能够获得所需的结果