CSS导航栏horizontal overflow auto失效，出现垂直滚动问题求助

你的问题出在这几个核心点：

1. 按钮的padding和margin未指定单位，浏览器解析异常导致元素高度超出导航栏固定高度，触发垂直滚动
2. HTML里的<span>闭合标签写错（写成了<span>而非</span>），干扰布局解析
3. 导航栏设置了justify-content: center，当内容过宽时，该属性会打乱水平滚动的正常表现

下面是修正后的完整代码：

修正后的CSS #

#navigationBar {
  display: flex;
  align-items: center; /* 让内部元素垂直居中 */
  border: 1px solid;
  border-right: none;
  border-left: none;
  min-height: 40px; /* 用min-height替代固定height，避免内容溢出 */
  background: white;
  overflow-x: auto; /* 开启水平滚动 */
}
#category { /* 修正原拼写错误：catogory → category */
  display: flex;
  gap: 4px; /* 用gap替代按钮margin，更简洁控制间距 */
  flex-shrink: 0; /* 防止容器被压缩，保证按钮一行排列 */
  padding: 0 8px; /* 给左右加内边距，避免按钮贴边 */
}
.options {
  font-size: 15px;
  padding: 6px 12px; /* 补上px单位，同时调整左右内边距优化按钮外观 */
  font-family: monospace;
  border-radius: 15px;
  border: 1px solid;
  white-space: nowrap; /* 防止按钮长文本换行导致高度增加 */
}

修正后的HTML #

<nav id="navigationBar">
  <span id="category">
    <button class="options" id="options-All">All</button>
    <button class="options">Islamic</button>
    <button class="options">Educational</button>
    <button class="options">Arts & Creative</button>
    <button class="options">TV & Media</button>
    <button class="options">Arabic</button>
    <button class="options">Urdu</button>
    <button class="options">Hindi</button>
    <button class="options">Turkish</button>
    <button class="options">English</button>
    <button class="options">Ideas</button>
    <button class="options">Business</button>
    <button class="options">Legal</button>
    <button class="options">IT & Tech</button>
    <button class="options">knowledge</button>
    <button class="options">Health</button>
    <button class="options">Ask For Something</button>
    <button class="options">Human Resourses</button>
    <button class="options">Other</button>
  </span> <!-- 修正闭合标签 -->
</nav>

关键修改说明 #

• 给按钮的padding补上px单位，解决元素尺寸异常问题
• 将导航栏固定height改为min-height，既保证最小高度，又能容纳按钮正常高度
• 给内部容器#category设置flex-shrink: 0，确保所有按钮在一行排列，触发水平滚动
• 用gap替代按钮margin，避免外边距叠加导致的布局混乱
• 给按钮添加white-space: nowrap，防止长文本按钮换行增高
• 修正HTML标签的拼写和闭合错误，保证结构合法性

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