修复了移动横向视图上的导航栏内容溢出到右侧的问题。

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 {
  显示：柔性；
  对齐内容：空间之间；
  填充：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:after,
.nav-bar .nav-items li a.active:after {
  变换：scaleX(1)；
  -webkit-变换：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>
<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 值。