代码之家 › 专栏 › 技术社区 › im5an

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

angular-ui-bootstrap bootstrap-4 twitter-bootstrap css html

im5an · 技术社区 · 6 年前

有人能帮我定位徽标和导航栏吗???

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

2 回复 | 直到 6 年前

Sergey 6 年前

给你。使用flexbox,因为它受大约 97% of browsers 。

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

-1

Safwan 6 年前

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