CSS dengan bahan bersudut

Question

Saya seorang pemula yang bersudut. Apa yang saya miliki saat ini adalah wadah sidenav dengan konten menjadi toolbar tikar. Sekarang pertanyaan saya adalah, seperti yang Anda lihat, ketika dilihat dengan desktop berukuran penuh, warna latar belakang bilah alat membentang dan memenuhi seluruh lebar, sedangkan bila dilihat dengan telepon, warna latar tidak terisi sepenuhnya. beberapa celah yang tidak menyenangkan untuk dilihat.

Saya telah mencoba mengatur lebar konten tikar sidenav menjadi 100% berpikir bahwa itu akan mengambil seluruh ruang dari lebar

Untuk informasi lebih lanjut, ini adalah 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>

dan ini cssnya

.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%;
}

Terima kasih atas bantuannya sebelumnya

Answer 1

Sepertinya Anda mengalami masalah dengan mat-toolbarelemen Anda yang memenuhi ruang horizontal mereka. Anda mungkin dapat membuat beberapa penyesuaian pada ruang yang digunakan logo Anda.

Juga, saya melihat bahwa di .buttonkelas Anda, Anda telah menambahkan width: 10px;namun sepertinya ini tidak diterapkan. Salah satu alasannya adalah karena mat-buttondilengkapi dengan gaya yang menentukan min-width: 64px;bahwa Anda mungkin perlu menimpa jika Anda ingin tombol Anda diperkecil ukurannya.

Jika pendekatan di atas berhasil, Anda mungkin juga ingin menyesuaikan bantalan tombol Anda juga. Berikut ini mungkin membantu, tetapi saya tidak dapat benar-benar mengujinya:

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