html - 使这些图标可滚动的 CSS 错误

Question

我在阅读中有这些按钮外观链接。我需要包含它们的 div 以允许您滚动选项。该菜单的其余部分需要留在原地。我做了 <li> s 显示内联并生成 <ul>使溢出可滚动。但它们似乎没有按预期滚动。

然后我测试了将其添加为视口(viewport)。

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

CSS

.headerNav { background-color: #333; }
.headerNav a { text-decoration: none; color: #fff; }
.headerNav ul { 
  list-style-type: none;     
  padding-left: 0; 
  height: 60px;
  width: 600px;
  overflow-y: auto;
}
.headerNav ul li { 
  display:inline-block; 
} 

.headerNav ul li a {
  border-radius: 4px;
  line-height: 30px;
  padding: 6px 12px;
  background-color: red;
  display:block;
}

HTML( meteor 元素)

<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>

这是我的 codepen这可能会改变很多。

Answer 1

在 <ul> 上设置宽度造成了问题。您还需要 whitespace: nowrap在 <ul> 上.

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

Codepen