Question

任何人都可以帮我定位徽标和导航栏???

我试图将“徽标”放在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

你走了。使用flexbox，因为大约97% of browsers支持它。

习惯了flexbox和网格系统。如果您需要支持过时的IE，可以使用float: left使它们并排，但您还需要使用clear-fix

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: