jquery - 强制 LI 出现在上一项的下一项上

Question

我在 DIV 中有五个 LI，LI 最大宽度为 90 像素，父容器最大宽度为 360px，我我试图显示前三个 div 和下一个 LI 应该被隐藏并且父级应该添加滚动条以便用户可以从左向右滑动以查看剩余的 LI ，但它会跳到下一行，我该如何强制 LI 并避免跳到第二行？

这里正在工作JSfiddle demo

.spotlight_graphs {
  bottom: 30px;
  clear: both;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
  overflow: auto;
  position: absolute;
  right: 0;
  width: 100%;
  background-color:#cbcbcb;
  overflow:auto;
  padding:10px;
}
.spotlight_graphs > ul {
  font-size: 0;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align:center;
}
.spotlight_graphs > ul > li {
  max-width: 90px;
  width: 33%;
  display:inline-block;
  background-color:#dec8c8;
  height:100px;
  margin:0 5px 5px 0;
  border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
  color: #404040;
  float: left;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

<div class="spotlight_graphs">
  <ul>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
    <li>
      <div class="graph_detail"> This is dummy title </div>
    </li>
  </ul>
</div>

Answer 1

要有滚动条，应用overflow 属性。因为你需要水平滚动条，所以你应该使用 overflow-x:scroll 并给 ul 宽度，这样你的 li 就会排成一行。

参见 here .要了解有关溢出的更多信息，请查看 this