如何为导航栏添加水平滚动条？附代码问题求助

核心修改方案 #

针对你遇到的按钮换行和水平滚动问题，只需调整CSS布局即可实现需求，以下是修改后的完整代码及说明：

修改后的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Yaldevi&display=swap'); /* 补充原代码缺失的字体引入 */

body {
  background-size: cover;
  background-repeat: no-repeat;
  color: #585858;
  margin: 0;
  padding: 0;
  font-family: 'Yaldevi', sans-serif;
  margin-top: 30px;
  box-sizing: border-box;
}

h1, p, h3 {
    text-align: center;
    color: black;
}
a {
    text-decoration: none;
}

.circontain a{
    color: black;
    display: inline-flex; /* 改为inline-flex，支持宽高与居中 */
    align-items: center; /* 垂直居中文字 */
    justify-content: center; /* 水平居中文字 */
    height: 100px;
    width: 100px;
    line-height: 100px; /* 与宽高一致，确保文字垂直居中 */
    background-color: pink;
    border-radius: 50%;
    margin: 20px 15px; /* 统一上下左右间距 */
    padding: 0; /* 去掉padding避免按钮大小异常 */
    border: none;
    cursor: pointer; 
    flex-shrink: 0; /* 禁止按钮被压缩变形 */
} 
.topnav {
    overflow-x: auto; /* 内容超出时显示水平滚动条 */
    display: flex; /* 使用flex布局排列子元素 */
    flex-wrap: nowrap; /* 强制所有按钮在一行，不换行 */
    padding: 0 10px; /* 左右内边距，避免按钮贴边 */
    scrollbar-width: thin; /* 可选：Firefox下美化滚动条 */
} 

/* 可选：Chrome等浏览器下美化滚动条 */
.topnav::-webkit-scrollbar {
    height: 6px;
}
.topnav::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}
  
/* 按钮 hover 效果 */
.topnav a:hover {
    background: rgba(255,0,0,0.5) ;
    color: black
}
  
/* 激活态按钮样式 */
.topnav a.active {
    background-color: #04AA6D;
    color: rgba(15, 13, 13, 0.5); /* 修复原代码rgba语法错误 */
}

关键修改说明 #

1. 容器布局调整：给.topnav添加display: flex和flex-wrap: nowrap，强制所有按钮在同一行排列，配合overflow-x: auto实现水平滚动。
2. 按钮样式修复：将按钮的display改为inline-flex，通过align-items和justify-content实现文字完美居中；调整line-height与按钮宽高一致，避免文字偏移；设置flex-shrink: 0防止按钮被压缩变形。
3. 间距与细节优化：用统一的margin替换原分散的边距设置，让按钮间距更均匀；去掉padding避免按钮实际大小超出设置值；补充缺失的字体引入，修复颜色值语法错误。

HTML无需修改 #

保持你原有的HTML结构即可，修改CSS后就能实现你想要的水平滚动圆形按钮效果。

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