html - 在我的 'Mat-toolbar' 右侧显示用户名

Question

我有一个 Angular 5项目和工具栏上我有以下详细信息:

• 子菜单按钮
• 公司标志
• 公司名称

这三个都很好，但现在我被要求在主菜单的右侧显示以下详细信息

• 人物图标
• 登录用户名

下面是 app.component.html 中的以下代码文件

    <mat-sidenav-container>
    <mat-sidenav #sidenav mode="over" opened="false">
        <div class="closeButton">
            <mat-icon (click)="sidenav.toggle()" title="Click to close sub-menu.">clear</mat-icon>
        </div>
        <a>Sidenav content</a>
        <a>This is a really long nameeeeee</a>
        <a>Sidenav content</a>
    </mat-sidenav>
    <mat-toolbar>
        <mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open sub-menu.">reorder</mat-icon>
        <img src="./assets/images/Crest.jpg">AJ Bell Information Interface
        <span flex></span>
        <div style="font-size: 15px">
            <mat-icon style="font-size: 25px">person</mat-icon> 
            USERNAME
        </div>
    </mat-toolbar>
</mat-sidenav-container>
<router-outlet>
        <div>this</div>
        <div>is</div>
        <div>the</div>
        <div>main</div>
        <div>body</div>
</router-outlet>

如您所见，我尝试使用 <span flex></span>还有float: right等等，但一点也不高兴。

我知道这很简单，但我有编码隧道，想不出解决方案

Answer 1

你可以使用flex: 1 1 auto;

看看这个example