Html CSS中使这些图标可滚动的错误

我在阅读中有这些按钮式链接。我需要包含它们的div，以便您可以滚动浏览选项。菜单的其余部分需要保持原样。我将

设置为内联显示，并将

设置为可滚动溢出。但它们似乎并没有按预期滚动

然后，我将其添加为视口进行了测试

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

HTML（流星项目）

---

这是我的建议，可能会有很大变化

在

上设置宽度会导致问题。您还需要在

上设置

空白：nowrap

.headerNav ul { 
  list-style-type: none;     
  padding-left: 0; 
  overflow-y: auto;
  white-space: nowrap;
}

---

据我所知，我不相信HTML5或CSS3在没有

脚本的情况下也能做到这一点。

一个选项是设置一个普通的滚动条，就像你在屏幕右侧看到的那样，只使用水平滚动条

如果您想要实现任何类型的滑动动作，则需要一个
jQuery
插件或代码。

显然，这个问题已经得到了回答，但我想我会提供一个很好的插件，它可以让任何引用这个问题的人轻松地对任何你想要的东西产生滑动效果

我想考虑它的移动脚本将不是一个合理的选择？（有充分的理由）？另外，你是否需要刷卡功能，就像用户在手机/平板电脑上刷卡一样？@NicholasHazel这个项目的维护者不会懂JavaScript。因此，我正在尝试只使用CSS构建此功能的一个版本。这将是在没有
脚本的情况下获得任何类型的可滚动性的唯一方法。在XCode iOS模拟器中，这看起来很棒！出于某种原因，在代码笔上，滚动条会显示出来。但这正是我所需要的，谢谢你。我非常感谢你在未来的项目中这样做。
<ul>
  <li><a href="{{featuresPath}}">Features</a></li>
  <li><a href="{{sciencePath}}">Science</a></li>
  <li><a href="{{videosPath}}">Videos</a></li>
  <li><a href="{{casesPath}}">Cases</a></li>
  <li><a href="{{testimonialsPath}}">Testimonials</a></li>
  <li><a href="#">Blog</a></li>
</ul>

.headerNav ul { 
  list-style-type: none;     
  padding-left: 0; 
  overflow-y: auto;
  white-space: nowrap;
}