CSS导航栏overflow-x属性未生效，求解决方法

你的问题出在导航项默认会自动换行，导致无法触发横向滚动。按以下修改即可解决：

修改后的完整代码 #

CSS #

html, body {
    margin: 0;
    padding: 0;
}
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    margin: 0;
    padding: 20px;
    background-color: grey;
    overflow-x: scroll;
    /* 强制内容不换行，核心修改 */
    white-space: nowrap;
    /* 可选优化：让padding包含在宽度内，简化宽度计算 */
    box-sizing: border-box;
}
.navbar-item {
    height: 100%;
    border: solid 2px black;
    margin: 10px;
    padding: 5px;
    /* 改为inline-block，确保盒模型属性正常生效 */
    display: inline-block;
}

HTML #

<div class="navbar">
  <span class="navbar-item">Home</span>
  <span class="navbar-item">Bookmarklets</span>
  <span class="navbar-item">Portals</span>
  <span class="navbar-item">Fun Stuff</span>
  <span class="navbar-item">About & Credits</span>
</div>

修改说明 #

• white-space: nowrap;：这是解决问题的核心，强制所有导航项在同一行排列，不会自动换行。只有内容总宽度超过容器宽度时，overflow-x: scroll才会生效，出现横向滚动条。
• display: inline-block;：span默认是行内元素，垂直方向的margin、padding表现不符合预期。改为inline-block后，既能保持行内排列，又能让盒模型属性正常生效。
• 可选的box-sizing: border-box;：添加后，.navbar的宽度可以直接设为100%，无需用calc(100% - 40px)，因为padding会被包含在宽度计算内，写法更简洁。

修改后，当导航项总宽度超出容器时，会自动出现横向滚动条，你可以通过滚动访问超出的内容。

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