Tailwind CSS设置fixed定位的标签导航无法横向滚动如何解决

设置fixed定位的元素会脱离常规文档流，默认宽度采用「适应内容」规则：内部内容多宽，元素本身就会被撑到多宽，不会自动占满父容器或视口的可用宽度。
你当前的标签外层fixed容器没有设置明确的宽度限制，容器宽度和内部标签总宽度完全一致，不存在内容溢出容器的场景，nav上写的overflow-x-auto自然无法触发横向滚动。

给fixed定位的外层容器显式添加宽度约束，把容器宽度限制在页面可视区域范围内，内部标签总宽度超出容器宽度时，就会自动触发横向滚动。
如果你使用Tailwind CSS，可直接参考修正后的代码：

<div className="pb-3 fixed top-0 left-0 w-full z-10 bg-white px-4">
  <nav
    className="-mb-px flex space-x-8 overflow-x-auto"
    aria-label="Tabs"
  >
    {/* 你的标签项内容 */}
  </nav>
</div>

调整说明 #

• 给外层fixed容器补充top-0 left-0 w-full：固定标签栏在页面顶部，宽度占满整个视口，从根源解决容器宽度被内容撑开的问题
• 补充px-4：给容器添加左右内边距，避免最左/最右侧的标签贴紧屏幕边缘，可根据你的设计需求调整内边距数值
• 如果你的标签栏不需要占满全屏宽度，而是要和页面内容区同宽，可以保留外层容器pb-3 fixed top-0 left-0 w-full z-10 bg-white的类，再在内层套一层宽度约束容器，比如用<div class="max-w-6xl mx-auto px-4">包裹nav即可
• 如果觉得默认横向滚动条样式突兀，可以给nav添加scrollbar-hide类（需安装Tailwind滚动条插件），隐藏滚动条的同时不影响横向滑动功能

内容的提问来源于stack exchange，提问作者Barty