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

Question

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

我试图将 "logo" 放入 div（左侧）和 "navbar"（右侧）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

尝试使用 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>

Answer 2

给你。使用 flexbox，因为大约 97% of browsers.

支持它

习惯flexbox和grid系统。如果你需要支持过时的 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>

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

How to display logo and navbar in single row using angular?

html

css

twitter-bootstrap

angular-ui-bootstrap

bootstrap-4