Memperbaiki isu dengan kandungan bar navigasi yang melimpah ke kanan pada paparan landskap mudah alih.

Question

Melengkapkan bar navigasi saya pada PC dan berkongsi kod ke iPhone saya untuk tontonan landskap dan potret. Dalam landskap, bar navigasi melimpah ke kanan. Menambahkan nilai env(sisipan-kawasan-selamat) Nampaknya tidak dapat mencari masalah.

iPhone (11 Pro Max) landskap Jurang kiri ialah kawasan selamat env(), tetapi jurang kawasan selamat yang betul dilimpahi oleh bar navigasi.

下面是代码：

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");

* {
  saiz kotak: kotak sempadan;
  padding: 0;
  margin: 0;
  gaya senarai: tiada;
  hiasan teks: tiada;
  font-family: "Montserrat", sans-serif;
  text-align: tengah;
}

badan {
  latar belakang: putih;
  padding-left: env(area-safe-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  paparan: flex;
  justify-content: ruang-antara;
  pelapik: 0 2rem;
  ketinggian: 50px;
  align-item: tengah;
  latar belakang: #0f0f0f;
  warna: #fff;
  kedudukan: tetap;
  atas: 0;
  lebar: 100%;
  indeks z: 999;
}

.hamburger {
  paparan: tiada;
}

.hamburger i {
  warna: putih;
  saiz fon: 25px;
  padding: 5px 7px;
  jejari sempadan: 5px;
}

.hamburger i:hover {
  warna: putih;
  latar belakang: rgb(69, 69, 69);
}

.nav-bar .nav-item {
  paparan: flex;
  jidar atas: 4px;
  align-item: tengah;
}

.nav-bar .nav-item li a {
  pengguna-pilih: tiada;
  font-weight: tebal;
  paparan: blok;
  warna: putih;
  saiz fon: 20px;
  padding: 4px 10px;
  peralihan: 150ms;
  -webkit-peralihan: 150ms;
  -moz-transition: 150ms;
  jidar: 0 10px;
}

.nav-bar .nav-item li a:selepas {
  paparan: blok;
  kandungan: "";
  atas sempadan: 2px pepejal rgb(140, 73, 255);
  transform: skalaX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  peralihan: mengubah 150ms mudah masuk;
  -webkit-transition: mengubah 150ms mudah masuk-keluar;
  -moz-transition: mengubah 150ms mudah-masuk-keluar;
}

.nav-bar .nav-item li a:hover:after,
.nav-bar .nav-item li a.active:after {
  transform: skalaX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: skalaX(1);
}

.nav-bar .nav-item li a:hover {
  penapis: kecerahan (85%);
  -penapis webkit: kecerahan(85%);
}

.nav-bar .login-register {
  paparan: flex;
  flex-direction: baris;
}

.nav-bar .login-register .button {
  pengguna-pilih: tiada;
  jidar bawah: 4px;
  warna: #fff;
  saiz fon: 20px;
  sempadan: 2px pepejal rgb(116, 36, 255);
  padding: 4px 20px;
  jejari sempadan: 4px;
  -webkit-border-radius: 4px;
  -jejari-sempadan-moz: 4px;
  peralihan: semua kemudahan masuk 0.2s;
  -webkit-transition: semua kemudahan dalam 0.2s;
  -moz-transition: semua kemudahan dalam 0.2s;
}

.nav-bar .login-register .button:hover {
  latar belakang: rgb(116, 36, 255);
}

/*berfungsi dengan baik | paparan mudah alih resolusi kecil*/
@media sahaja skrin dan (lebar maksimum: 850px) {
  .hamburger {
    ketinggian: auto;
    paparan: blok;
    kursor: penunjuk;
  }
  .hamburger i {
    lebar: 35px;
    ketinggian: 35px;
    latar belakang: #0f0f0f;
  }.nav-bar .nav-item {
    flex-direction: lajur;
    kedudukan: tetap;
    lebar: 20vw;
    latar belakang: #383838;
    pelapik: 1.5rem 0;
    ketinggian: 280px;
    atas: 46px;
    indeks z: 99;
    kanan: -100%;
    peralihan: 0.2s mudah masuk;
    -webkit-transition: 0.2s kemudahan masuk;
    -moz-transition: 0.2s kemudahan masuk;
  }

  .nav-bar .nav-item li a {
    saiz fon: 20px;
    padding: 0 10px;
    jidar: 10px 0;
  }

  .nav-bar .nav-items.active {
    kanan: 0;
  }
}

<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'">LOGO UJIAN</div>
  <div class="hamburger" for="check">
    <i class="fa-solid fa-bars"></i>
  </div>
  <ul class="nav-item">
    <li>
      <a href="#" class="active">Rumah</a>
    </li>
    <li>
      <a href="#">Teroka</a>
    </li>
    <li>
      <a href="#">Beli</a>
    </li>
    <li>
      <a href="#">Mengenai</a>
    </li>
    <div class="login-register">
      <a href="#" class="button">Log masuk</a>
    </div>
  </ul>
</navbar>

我和一个朋友尝试了不同的更改，例如 ma​​rgin-padding、align-items、list-style、overflow、th/max/-strong 属性。所有这些都会导致导航栏中的内容发生位移或尺寸错误。

Answer 1

Saya mencuba kod anda dan bar sisi tidak muncul

Jika anda menggunakan pelayan langsung, saya syorkan anda memuat semula halaman berbilang kali

Answer 2

Saya akhirnya menemui masalah dengan limpahan bar navigasi, ia sepatutnya menjadi kedudukan: Nilai Melekit dalam .nav-bar.