CSS mit eckigem Material

Question

Ich bin ein Anfänger zu eckig. Was ich derzeit habe, ist ein Sidenav-Container, dessen Inhalt eine matte Symbolleiste ist. Wie Sie sehen, ist meine Frage, wie Sie sehen können, bei der Anzeige mit einem Desktop in voller Größe die Hintergrundfarbe der Symbolleiste über die gesamte Breite gestreckt und ausgefüllt, während bei der Anzeige mit einem Telefon die Hintergrundfarbe nicht vollständig ausgefüllt ist eine Lücke, die nicht angenehm anzusehen ist.

Ich habe versucht, die Breite des Matten-Seitenav-Inhalts auf 100% einzustellen, da ich dachte, dass dies den gesamten Raum der Breite einnehmen würde

Für weitere Informationen ist dies das HTML.

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer
                 class="sidenav"
                 fixedInViewport
                 [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
                 [opened]="false">
        <mat-toolbar>
            <button mat-button
                    (click)="drawer.close()">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar>
        <mat-nav-list>
            <a mat-list-item
               routerLink="/"
               (click)="drawer.close()">Home</a>
            <a mat-list-item
               routerLink="/products"
               (click)="drawer.close()">Products</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar>
            <button type="button"
                    aria-label="Toggle Sidenav"
                    mat-icon-button
                    (click)="drawer.toggle()">
                <mat-icon aria-label="Side nav toggle Icon">menu</mat-icon>
            </button>
            <span class="logo"
                  routerLink="/">
                <img class="ww-logo"
                     src="assets/images/WWtrans.png" />
            </span>
            <div>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Search for a product"
                              svgIcon="search"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Login if the user hasn't logged in yet"
                              svgIcon="login"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Show what's inside the cart"
                              svgIcon="shopping-cart"></mat-icon>
                </button>
            </div>
        </mat-toolbar>
    </mat-sidenav-content>
</mat-sidenav-container>

und hier ist die CSS

.logo {
    display: flex;
    margin: auto auto;
    outline: none;
    align-self: center;
    justify-content: center;
    align-self: center;
    min-width: 100px;
    max-width: 100px;

    .ww-logo {
        width: 60%;
        cursor: pointer;
    }
}

.button {
    border: 1px solid red;
    width: 10px;
}

.sidenav-container {
    height: 100%;
    width: 100%;
}

mat-sidenav-content {
    width: 100%;
}

Vielen Dank für jede Hilfe im Voraus

Answer 1

Sie scheinen auf ein Problem zu stoßen, bei dem Ihre mat-toolbarElemente ihren horizontalen Raum überschreiten. Möglicherweise können Sie einige Anpassungen an dem Platz vornehmen, den Ihr Logo einnimmt.

Ich sehe auch, dass Sie in Ihrer .buttonKlasse hinzugefügt haben, width: 10px;aber es sieht so aus, als würde dies nicht angewendet. Ein Grund dafür ist, dass mat-buttonein Stil mitgeliefert wird, der angibt, min-width: 64px;dass Sie möglicherweise überschreiben müssen, wenn Sie möchten, dass Ihre Schaltflächen verkleinert werden.

Wenn der oben beschriebene Ansatz funktioniert, möchten Sie möglicherweise auch die Polsterung Ihrer Schaltflächen anpassen. Folgendes mag hilfreich sein, aber ich konnte es nicht testen:

.button {
    border: 1px solid red;
    min-width: 32px !important;
    padding: 2px !important;
}