使用CSS、jQuery从两行（列表）中创建旋转木马

我在一个封闭的平台（JetShop）上工作，虽然我可以添加任何类型的脚本，但我无法访问预构建的脚本来更改它们以满足客户的需要

我需要将相关产品分为两行制作一个旋转木马，如下所示：

<div class="all-products">
  <ul class="one-row first-row">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
  <ul class="one-row second-row">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

这就是它的行为方式：

所以要明确的是，我不能编辑这个页面上的任何HTML，我需要使用CSS将所有8个项目放在一行中。只有这样，我才能使用jQuery来制作旋转木马

---

有什么想法吗？

答案是

空白：nowrap

：

.one-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

如果要将所有8个项目放在一行中，请对

使用相同的项目。所有产品也要使用
：

.all-products {
  white-space: nowrap;
}

提琴：而且
哇，这是一个超快速且简单的解决方案！谢谢你，这就是我所需要的：）@DearBee谢谢你，很高兴能帮助你。
.all-products {
  white-space: nowrap;
}