如何使用角度在单行中显示徽标和导航栏？

Question

谁能帮我定位标志和导航栏？？？

我试图将“徽标”放在 div（左侧）和“导航栏”（右侧）like this in the image shown 但即使我尝试了许多不同的属性，我的导航栏总是占据新行。这是我的代码`

.img-fluid {
  display: inline;
  max-width: 10% !important;
  margin-right: 17% !important;
}

<div>
  <div style="display: inline">
    <router-outlet></router-outlet>
    <img class="img-fluid" src={{imagePath}}>
    <br>
    <span><h6 style="color:white">Appointment System</h6></span>
  </div>
  <div style="display: inline">
    <mat-toolbar class="toolbar-background">

      <a routerLink="customer" mat-button>Customer Form</a>
      <a routerLink="showAllCustomer" mat-button>Customer Details</a>

      <a (click)="logout()" mat-button>Logout</a>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </div>
</div>

Answer 1

给你。使用 flexbox，因为它受到大约 97% of browsers 的支持。

习惯弹性盒和网格系统。如果需要支持过时的 IE 可以使用float: left 让它们并排，但也需要使用clear-fix

你的问题有很好的解释https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.img-fluid {
  max-width: 10% !important;
  margin-right: 17% !important;
}

.flex {
  display: flex;
}

<div class="flex">
  <div>
    <router-outlet></router-outlet>
    <img class="img-fluid" src={{imagePath}}>
    <br>
    <span><h6 style="color:white">Appointment System</h6></span>
  </div>
  <div>
    <mat-toolbar class="toolbar-background">

      <a routerLink="customer" mat-button>Customer Form</a>
      <a routerLink="showAllCustomer" mat-button>Customer Details</a>

      <a (click)="logout()" mat-button>Logout</a>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </div>
</div>

Answer 2

尝试使用table。

.img-fluid {
  display: inline;
  max-width: 10% !important;
  margin-right: 17% !important;
}

<div>
  <!-- <div style="display: inline"> -->
  <table width="100%"><tr><td align="left">
    <router-outlet></router-outlet>
    <img class="img-fluid" src={{imagePath}}>
    <br>
    <span><h6 style="color:white">Appointment System</h6></span>
  <!-- </div> -->
  </td>
  <!-- <div style="display: inline"> -->
  <td align="right" valign="top">
    <mat-toolbar class="toolbar-background">

      <a routerLink="customer" mat-button>Customer Form</a>
      <a routerLink="showAllCustomer" mat-button>Customer Details</a>

      <a (click)="logout()" mat-button>Logout</a>
    </mat-toolbar>
    <router-outlet></router-outlet>
  <!-- </div> -->
  </td></tr></table>
</div>