각진 재질의 CSS

Question

나는 각도에 대한 초보자입니다. 내가 현재 가지고있는 것은 콘텐츠가 매트 툴바 인 사이드 내비게이션 컨테이너입니다. 이제 내 질문은 보시다시피 전체 크기의 데스크톱으로 볼 때 도구 모음의 배경색이 늘어나 전체 너비를 채우는 반면 전화로 볼 때 배경색은 완전히 채워지지 않습니다. 보기에 좋지 않은 간격.

나는 그것이 너비의 전체 ​​공간을 차지할 것이라고 생각하여 매트 사이드 내비 콘텐츠 너비를 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;
}