Html 如果图像位于Sidenav中，则Material Sidenav会溢出内容

早上好

我在Angular应用程序中使用材质设计侧导航，为用户提供页面选择。侧边导航首先包含一个徽标，然后是用户可以选择的所有页面（如果用户已登录）

问题： 如果用户未登录，则徽标是宽度最大的元素；这就混淆了页面内容的定位。页面内容被sidenav溢出，因为页面内容与页面链接而不是徽标保持一致

正如您所见，sidenav尊重徽标的宽度。内容并不完整

HTML:

<mat-card>
    <mat-sidenav-container>
        <mat-sidenav #drawer mode="side" opened role="navigation">
            <mat-nav-list>
                <div class="logo-nav">
                    <img src="./assets/MyLogo.png">
                </div>
                <a id="nav-home" mat-list-item routerLink='home' routerLinkActive="active">Home</a>
                <a id="nav-schulauswahl" mat-list-item routerLink='page1' routerLinkActive="active" *ngIf="loggedIn">
                    Page 1
                </a>
                <a id="nav-schule-list" mat-list-item routerLink='page2' routerLinkActive="active" *ngIf="loggedIn">
                    Page 2 with very long name
                </a>
                <a id="nav-logout" mat-list-item (click)='logout()' routerLinkActive="active">Logout</a>
            </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content>
            Some Content
        </mat-sidenav-content>
    </mat-sidenav-container>
</mat-card>

import { Component } from '@angular/core';

@Component({
    selector: 'my-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent {

    get loggedIn(): boolean {
        return true; // <- Toogle this to see all page links
    }
}

@import '../../styles/colors.scss';

.logo-nav {
    width: 100%;
    text-align: center;
}

// Workaround
mat-sidenav-content {
    margin-left: 230px !important;
}

如果用户已登录，则会显示较长的页面名称，这使得计算的

左边距

正确

---

有多种方法可以解决这个问题。例如：

将

width

属性应用于徽标图像。可以是您使用的

100%

或

230px

.logo导航img{
最小宽度：230px；
}

将

width

属性设置为sidenav本身

.mat sidenav{
宽度：230px；
}

使用

列

方向将

mat nav list

的显示更改为

flex

.mat导航列表{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}

有多种方法可以解决此问题。例如：

将

width

属性应用于徽标图像。可以是您使用的

100%

或

230px

.logo导航img{
最小宽度：230px；
}

将

width

属性设置为sidenav本身

.mat sidenav{
宽度：230px；
}

使用

列

方向将

mat nav list

的显示更改为

flex

.mat导航列表{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}

您是否在任何服务器上部署了代码？如果是，请分享链接。谢谢，您是否在任何服务器上部署了代码？如果是，请分享链接。感谢所有这些选择。由于material sidenav的另一个问题，我使用了第二个选项：当出现另一个选项并且sidenav的宽度发生变化时，mat sidenav内容的左边距不会立即重新计算-只有在页面刷新之后。但是对于我来说，侧导航的固定宽度是可以的。谢谢所有这些选择。由于material sidenav的另一个问题，我使用了第二个选项：当出现另一个选项并且sidenav的宽度发生变化时，mat sidenav内容的左边距不会立即重新计算-只有在页面刷新之后。但侧导航的固定宽度对我来说是合适的。