모바일 가로 보기에서 탐색 모음 콘텐츠가 오른쪽으로 넘치던 문제가 해결되었습니다.

Question

<p> PC에서 내 탐색 모음을 완성하고 가로 및 세로 보기를 위해 내 iPhone에 코드를 공유했습니다. 가로 방향에서는 탐색 모음이 오른쪽으로 넘칩니다. 비차단 목적 뷰에 <em>env(safe-area-inset)</em> 값을 추가했지만 오른쪽에 오버플로가 발생했습니다. 문제를 찾을 수 없는 것 같습니다. </p> <p>iPhone(11 Pro Max) 가로 모드 왼쪽 틈은 안전 영역 env()이지만 오른쪽 안전 영역 틈은 탐색 모음으로 인해 오버플로됩니다.</p> <p>하측면是代码:</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap"); * { 상자 크기 조정: 테두리 상자; 패딩: 0; 여백: 0; 목록 스타일: 없음; 텍스트 장식: 없음; 글꼴 모음: "몬세라트", 산세리프; 텍스트 정렬: 중앙; } 몸 { 배경: 흰색; 패딩 왼쪽: env(safe-area-inset-left); 패딩 오른쪽: env(안전 영역 삽입 오른쪽); 패딩 상단: env(safe-area-inset-top); } .nav-bar { 디스플레이: 플렉스; 내용 정당화: 공백 사이; 패딩: 0 2rem; 높이: 50px; 항목 정렬: 중앙; 배경: #0f0f0f; 색상: #fff; 위치: 고정; 상단: 0; 너비: 100%; Z-색인: 999; } .햄버거 { 디스플레이: 없음; } .햄버거 나 { 색상: 흰색; 글꼴 크기: 25px; 패딩: 5px 7px; 테두리 반경: 5px; } .hamburger i:hover { 색상: 흰색; 배경: rgb(69, 69, 69); } .nav-bar .nav-항목 { 디스플레이: 플렉스; 여백 상단: 4px; 항목 정렬: 중앙; } .nav-bar .nav-items li a { 사용자 선택: 없음; 글꼴 두께: 굵게; 디스플레이: 블록; 색상: 흰색; 글꼴 크기: 20px; 패딩: 4px 10px; 전환: 150ms; -웹킷 전환: 150ms; -moz 전환: 150ms; 여백: 0 10px; } .nav-bar .nav-items li a:after { 디스플레이: 블록; 콘텐츠: ""; 테두리 상단: 2px 솔리드 rgb(140, 73, 255); 변환: scaleX(0); -웹킷 변환: scaleX(0); -moz-변환: scaleX(0); 전환: 150ms Ease-In-Out 변환; -webkit-transition: 150ms Ease-In-Out 변환; -moz-transition: 150ms의 easy-in-out을 변환합니다. } .nav-bar .nav-items li a:hover:after, .nav-bar .nav-items li a.active:after { 변환: scaleX(1); -웹킷 변환: scaleX(1); -moz-변환: scaleX(1); } .nav-bar .nav-items li a:hover { 필터: 밝기(85%); -웹킷 필터: 밝기(85%); } .nav-bar .login-register { 디스플레이: 플렉스; 플렉스 방향: 행; } .nav-bar .login-register .button { 사용자 선택: 없음; 여백 하단: 4px; 색상: #fff; 글꼴 크기: 20px; 테두리: 2px 단색 RGB(116, 36, 255); 패딩: 4px 20px; 테두리 반경: 4px; -웹킷-국경-반경: 4px; -moz-국경-반경: 4px; 전환: 모든 이즈인 0.2초; -webkit-transition: 모든 이즈인 0.2초; -moz-transition: 모든 이즈인 0.2초; } .nav-bar .login-register .button:hover { 배경: rgb(116, 36, 255); } /*잘 작동합니다 | 작은 해상도 모바일 보기*/ @media 전용 화면 및 (최대 너비: 850px) { .햄버거 { 높이: 자동; 디스플레이: 블록; 커서: 포인터; } .햄버거 나 { 너비: 35px; 높이: 35px; 배경: #0f0f0f; }.nav-bar .nav-항목 { 플렉스 방향: 열; 위치: 고정; 폭: 20vw; 배경: #383838; 패딩: 1.5rem 0; 높이: 280px; 상단: 46px; Z-색인: 99; 오른쪽: -100%; 전환: 0.2초 완화; -webkit-transition: 0.2초 완화; -moz-transition: 0.2초 이지인; } .nav-bar .nav-items li a { 글꼴 크기: 20px; 패딩: 0 10px; 여백: 10px 0; } .nav-bar .nav-items.active { 오른쪽: 0; } }</pre> <pre class="brush:html;toolbar:false;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/ css/all.min.css"> <navbar class="nav-bar"> <div class="logo" onclick="window.location.href='Home.html'">테스트 로고</div> <div class="hamburger" for="check"> <i class="fa-solid fa-bars"></i> </div> <ul class="nav-items">

<a href="#" class="active">홈</a> </li>

<a href="#">탐색</a> </li>

<a href="#">쇼핑</a> </li>

<a href="#">정보</a> </li> <div class="로그인-등록"> <a href="#" class="button">로그인</a> </div> </ul> </navbar></pre> </p> <p>저와 다른 것은 다른 방식이 아닙니다. <strong>ma​​rgin-padding, align-items, list-style,overflow,display, width/max-width;

Answer 1

귀하의 코드를 시도했는데 사이드바가 나타나지 않았습니다

라이브 서버를 사용하는 경우 페이지를 여러 번 새로 고치는 것이 좋습니다

Answer 2

드디어 내비게이션 바 오버플로 문제를 발견했습니다. .nav-bar의 position: Sticky 값이어야 합니다.