没问题！我来给你一步步拆解怎么做出这种支持横向滚动、点击有效的顶部导航——刚好我之前做过类似需求，直接上干货：

第一步：HTML结构搭建 #

先写基础的导航框架，核心是给导航列表套一个可滚动容器，确保所有导航项能在一行排列并支持横向滚动：

<nav class="top-nav">
  <div class="scrollable-nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home" class="nav-link">首页</a></li>
      <li class="nav-item"><a href="#products" class="nav-link">产品中心</a></li>
      <li class="nav-item"><a href="#services" class="nav-link">服务介绍</a></li>
      <li class="nav-item"><a href="#case" class="nav-link">成功案例</a></li>
      <li class="nav-item"><a href="#about" class="nav-link">关于我们</a></li>
      <li class="nav-item"><a href="#news" class="nav-link">行业资讯</a></li>
      <li class="nav-item"><a href="#contact" class="nav-link">联系我们</a></li>
      <li class="nav-item"><a href="#faq" class="nav-link">常见问题</a></li>
      <!-- 可以继续加更多导航项测试滚动效果 -->
    </ul>
  </div>
</nav>

第二步：CSS核心样式实现 #

重点是控制容器的横向滚动行为，同时美化导航样式：

/* 顶部导航栏基础样式 */
.top-nav {
  position: sticky; /* 可选：让导航固定在顶部，滚动页面时不消失 */
  top: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 0;
  z-index: 100;
}

/* 核心：可滚动容器 */
.scrollable-nav {
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
  white-space: nowrap; /* 强制列表项不换行 */
  padding: 0 1rem; /* 左右留白，避免导航项贴边 */
}

/* 导航列表样式 */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 导航项排列 */
.nav-item {
  display: inline-block; /* 让列表项在一行排列 */
  margin-right: 1.5rem;
}

/* 导航链接样式 */
.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #007bff; /* hover和激活状态的颜色 */
  border-bottom: 2px solid #007bff; /* 可选：底部下划线标识 */
}

/* 可选：美化横向滚动条（适配Chrome、Safari） */
.scrollable-nav::-webkit-scrollbar {
  height: 6px;
}

.scrollable-nav::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-nav::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.scrollable-nav::-webkit-scrollbar-thumb:hover {
  background: #999;
}

关键逻辑说明 #

• overflow-x: auto：当导航项总宽度超过容器宽度时，自动显示横向滚动条，小于时则隐藏滚动条
• white-space: nowrap：强制所有导航列表项在同一行显示，不自动换行
• display: inline-block：让每个导航项保持块级元素的特性（可设置padding等），同时在一行排列

你可以根据自己的需求调整颜色、间距、阴影这些样式，多加点导航项测试滚动效果，点击链接也完全正常~

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