修正了移動橫向視圖上的導覽列內容溢位到右側的問題。

Question

<p>在 PC 上完成了我的導覽欄，並將程式碼分享到我的 iPhone，以橫向和縱向查看。在景觀中，導覽列在右側溢出。新增了 <em>env(safe-area-inset)</em> 值用於非阻塞目的視圖，但在右側溢出。似乎找不到問題所在。 </p> <p>iPhone (11 Pro Max) 橫向 左側間隙是安全區域 env()，但右側安全區域間隙被導覽列溢出。</p> <p>下面是程式碼：</p> <p>

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

* {
  框大小：邊框框；
  填充：0；
  保證金：0；
  列表樣式：無；
  文字裝飾：無；
  字體系列：“蒙特塞拉特”，無襯線字體；
  文字對齊：居中；
}

身體 {
  背景：白色；
  左填充：env(安全區域插入左);
  填充右：env（安全區域插入右）；
  填充頂部：env（安全區域插入頂部）；
}

.nav-bar {
  顯示：柔性；
  justify-content：空間之間；
  填充：0 2rem；
  高度：50px；
  對齊項目：居中；
  背景：#0f0f0f；
  顏色：#fff；
  位置：固定；
  頂部：0；
  寬度：100%；
  z 索引：999；
}

.漢堡 {
  顯示：無；
}

.漢堡包我{
  白顏色;
  字體大小：25px；
  內邊距：5px 7px；
  邊框半徑：5px；
}

.漢堡我：懸停{
  白顏色;
  背景：rgb(69,69,69)；
}

.nav-bar .nav-items {
  顯示：柔性；
  上邊距：4px；
  對齊項目：居中；
}

.nav-bar .nav-items li a {
  用戶選擇：無；
  字體粗細：粗體；
  顯示：塊；
  白顏色;
  字體大小：20px；
  內邊距：4px 10px；
  過渡：150ms；
  -webkit-transition：150ms；
  -moz-過渡：150ms；
  邊距：0 10px；
}

.nav-bar .nav-items li a:after {
  顯示：塊；
  內容： ””;
  頂部邊框: 2px 實心 rgb(140, 73, 255);
  變換：scaleX(0)；
  -webkit-transform:scaleX(0);
  -moz-變換：scaleX(0)；
  過渡：變換 150ms 緩入緩出；
  -webkit-transition：變換 150ms 緩緩出；
  -moz-transition：變換 150ms 緩入緩出；
}

.nav-bar .nav-items li a:hover:之後，
.nav-bar .nav-items li a.active:after {
  變換：scaleX(1)；
  -webkit-transform：scaleX（1）；
  -moz變換：scaleX(1)；
}

.nav-bar .nav-items li a:hover {
  濾鏡：亮度（85%）；
  -webkit-filter：亮度（85%）；
}

.nav-bar .login-register {
  顯示：柔性；
  彎曲方向：行；
}

.nav-bar .login-register .button {
  用戶選擇：無；
  下邊距：4px；
  顏色：#fff；
  字體大小：20px；
  邊框: 2px 實心 rgb(116, 36, 255);
  內邊距：4px 20px；
  邊框半徑：4px；
  -webkit邊框半徑：4px；
  -moz-邊框半徑：4px；
  過渡：全部緩入0.2s；
  -webkit-transition：全部緩入0.2s；
  -moz-transition：所有緩入0.2s；
}

.nav-bar .login-register .button:hover {
  背景：rgb(116, 36, 255);
}

/*工作正常|小解析度移動視圖*/
@media only 螢幕和（最大寬度：850px）{
  .漢堡 {
    高度：自動；
    顯示：塊；
    遊標：指針；
  }
  .漢堡包我{
    寬度：35 像素；
    高度：35 像素；
    背景：#0f0f0f；
  }

  .nav-bar .nav-items {
    彎曲方向：列；
    位置：固定；
    寬度：20vw；
    背景：#383838；
    填充：1.5rem 0；
    高度：280像素；
    頂部：46 像素；
    z 指數：99；
    右：-100%；
    過渡：0.2s緩入；
    -webkit-transition：0.2s 緩入；
    -moz-transition：0.2s緩入；
  }

  .nav-bar .nav-items li a {
    字體大小：20px；
    內邊距：0 10px；
    邊距：10px 0；
  }

  .nav-bar .nav-items.active {
    右：0；
  }
}</前>
<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">
<導覽列類別=「導覽列」>
  
 測試標誌
  

    <i class="fa-solid fa-bars"></i>
  
  <ul class="nav-items">
    <li>
      首頁
    </li>
    <li>
      探索
    </li>
    <li>
      商店
    </li>
    <li>
      關於
    </li>
    

      登入
    
  </ul>
</導覽列></pre>


</p>
<p>我和朋友嘗試了不同的更改，例如<strong>ma​​rgin-padding、align-items、list-style、overflow、display、width/max-width</strong>所有這些都會導致導航節點的內容發生地質或尺寸錯誤。</p>            

Answer 1

我嘗試了你的程式碼，沒有出現側邊欄

如果您使用的是即時伺服器，我建議您多次刷新頁面

Answer 2

我終於發現了導覽列溢出的問題，它應該是 .nav-bar 中的一個 position: Sticky 值。