如何在导航栏中将按钮向左对齐

Question

尝试将一些菜单按钮左对齐 Angular Material

喜欢 screenshoot

 <div>
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="menu" routerLink="/">
      <span>Just a menu</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/component1">Button1</a>
      <a mat-button routerLink="/component2">Button2</a>
      <a mat-button routerLink="/component3">Button3</a>
      <a mat-button routerLink="/login">Login</a>
      <a mat-button routerLink="/logout">Logout</a>
    </div>
  </mat-toolbar>
</div>

我怎样才能以正确的方式做到这一点并且仍然拥有响应式网站？

Answer 1

我正在使用这个库：https://www.npmjs.com/package/@angular/flex-layout 更容易对齐

安装库后，在您的代码中使用此代码段

<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
    <div fxLayout="row" fxLayoutAlign="start center">
      <a mat-button routerLink="/component1">Button1</a>
      <a mat-button routerLink="/component2">Button2</a>
      <a mat-button routerLink="/component3">Button3</a>
    </div>
    <div>
      <a mat-button routerLink="/login">Login</a>
      <a mat-button routerLink="/logout">Logout</a>
    </div>
</div>

Answer 2

你可以这样使用 flexbox：

将 class 添加到您的 div 并添加容器以指定“左右块”

.container {
  display: flex;
  justify-content: space-between;
  }

    <div fxShow="true" fxHide.lt-md="true" class="container">
      <div>
          <a mat-button routerLink="/component1">Button1</a>
          <a mat-button routerLink="/component2">Button2</a>
          <a mat-button routerLink="/component3">Button3</a>
      </div>
      <div>
          <a mat-button routerLink="/login">Login</a>
          <a mat-button routerLink="/logout">Logout</a>
      </div>
    </div>

左边是3个按钮，右边是登录、登录

如何在导航栏中将按钮向左对齐

How to align buttons to left in navbar

angular-material

angular8