javascript - 从左向右滑动 LI 无需滚动 CSS 或 JS？

Question

我想在移动设备上从左向右滑动LI，我用CSS就完成了，我知道用任何插件都可以轻松完成，但是我不能在我的元素中使用任何插件，这里是 JSfiddle demo我所创建的，主要要求是从底部删除滚动条，在移动设备中，当您触摸内容区域时滚动条会出现。

如果我正在使父 div overflow:hidden 然后我不能滑动。

.spotlight_numbers-v2 {
width: 100%;
max-width: 480px;
float: left;
background: #f3f3f3;
overflow: auto;
}
.spotlight_numbers-v2 > ul {
list-style: none;
margin: 0;
padding: 0;
width: 150%;
}
.spotlight_numbers-v2 > ul > li {
color: #606060;
font-weight: 500;
display: inline-block;
list-style: none;
margin: 0 15px;
padding: 10px;
text-transform: uppercase;
font-size: 16px;
}
.spotlight_numbers-v2 > ul > li > a {
color: #606060;
text-decoration: none;
}

<div class="spotlight_numbers-v2">
  <ul>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospital</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Drugs</a></li>
    <li><a href="#">Interview</a></li>
  </ul>
</div>

请推荐

Answer 1

只需使用另一个容器，并给它一个小于 .spotlight_numbers-v2 高度的高度，并将容器设置为 overflow: hidden;。

.container{
   height: 40px;
   overflow: hidden;
}

.spotlight_numbers-v2 {
  width: 100%;
  max-width: 480px;
  float: left;
  background: #f3f3f3;
  overflow-y: auto;
}
.spotlight_numbers-v2 > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 150%;
}
.spotlight_numbers-v2 > ul > li {
  color: #606060;
  font-weight: 500;
  display: inline-block;
  list-style: none;
  margin: 0 15px;
  padding: 10px;
  text-transform: uppercase;
  font-size: 16px;
}
.spotlight_numbers-v2 > ul > li > a {
  color: #606060;
  text-decoration: none;
}

<div class="container">
  <div class="spotlight_numbers-v2">
    <ul>
      <li><a href="#">Doctors</a>
      </li>
      <li><a href="#">Hospital</a>
      </li>
      <li><a href="#">Articles</a>
      </li>
      <li><a href="#">Drugs</a>
      </li>
      <li><a href="#">Interview</a>
      </li>
    </ul>
  </div>
</div>