모바일 가로 보기에서 탐색 모음 콘텐츠가 오른쪽으로 넘치던 문제가 해결되었습니다.
<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>margin-padding, align-items, list-style,overflow,display, width/max-width;
