CSS พร้อมวัสดุเชิงมุม

Question

ฉันเป็นมือใหม่ในเชิงมุม สิ่งที่ฉันมีอยู่ในขณะนี้คือคอนเทนเนอร์ sidenav ที่มีเนื้อหาเป็นแถบเครื่องมือ mat ตอนนี้คำถามของฉันคืออย่างที่คุณเห็นเมื่อดูด้วยเดสก์ท็อปขนาดเต็มสีพื้นหลังของแถบเครื่องมือจะยืดออกและเต็มความกว้างทั้งหมดในขณะที่เมื่อดูด้วยโทรศัพท์สีพื้นหลังจะไม่เต็มไปหมด ช่องว่างบางอย่างที่ไม่น่ามอง

ฉันได้ลองตั้งค่าความกว้างของเนื้อหา mat sidenav เป็น 100% โดยคิดว่าจะใช้พื้นที่ทั้งหมดของความกว้าง

สำหรับข้อมูลเพิ่มเติมนี่คือ 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>

และนี่คือ 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%;
}

ขอบคุณสำหรับความช่วยเหลือล่วงหน้า

Answer 1

ดูเหมือนว่าคุณกำลังประสบปัญหากับmat-toolbarองค์ประกอบของคุณที่ล้นพื้นที่แนวนอน คุณอาจสามารถปรับเปลี่ยนพื้นที่โลโก้ของคุณได้

นอกจากนี้ฉันเห็นว่าใน.buttonชั้นเรียนของคุณคุณได้เพิ่มเข้าไปwidth: 10px;แต่ดูเหมือนว่าจะไม่ถูกนำไปใช้ เหตุผลหนึ่งคือmat-buttonมาพร้อมกับสไตล์ที่ระบุmin-width: 64px;ว่าคุณอาจต้องลบล้างหากคุณต้องการให้ปุ่มของคุณลดขนาดลง

หากวิธีการข้างต้นได้ผลคุณอาจต้องปรับการเว้นช่องว่างของปุ่มด้วยเช่นกัน สิ่งต่อไปนี้อาจเป็นประโยชน์ แต่ฉันไม่สามารถทดสอบได้จริง:

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