Как вывести логотип и навигационную панель в один ряд с помощью угловых? - PullRequest
Новая
       22

Как вывести логотип и навигационную панель в один ряд с помощью угловых?

0 голосов
/ 05 мая 2018

Может кто-нибудь помочь мне разместить логотип и навигационную панель ???

Я пытаюсь поместить "логотип" внутри div (слева) и "navbar" (справа) , как показано на изображении , но хотя я пробовал много разных Свойства моего navbar всегда занимают новую строку. Вот мой код` 

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

Ответы [ 2 ]

0 голосов
/ 06 мая 2018

Вот, пожалуйста. Используйте flexbox, поскольку он поддерживается примерно 97% браузеров .

Привыкайте к flexbox и сетке. Если вам нужна поддержка устаревших 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>
0 голосов
/ 06 мая 2018

Попробуйте использовать 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>
...