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

在我的'Mat-toolbar'上向右显示用户名

1 个答案: