修正了移動橫向視圖上的導覽列內容溢位到右側的問題。
<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>margin-padding、align-items、list-style、overflow、display、width/max-width</strong>所有這些都會導致導航節點的內容發生地質或尺寸錯誤。</p>