使用CSS創建兩行（列表）中的傳送帶，jQuery

Question

我正在封閉平臺（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> 

和CSS是如下：

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

.second-row { 
    margin-top: 20px; 
} 

.item { 
    display: inline-block; 
    width: 22%; 
    height: 100px; 
    margin-right: 3%; 
    background: gray; 
} 

.item:nth-of-type(4n+0) { 
    margin-right: 0; 
} 

這是它如何工作：https://jsfiddle.net/sr3rnm84/

所以要清楚，我無法編輯此頁面上的任何HTML，我需要通過使用CSS將所有8個項目放到一行中。只有這樣我才能使用jQuery將輪播製作出來。

有什麼想法？

Answer 1

答案是white-space: nowrap：

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

如果你想將所有的單排的8個項目，請使用相同的.all-products還有：

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

小提琴：https://jsfiddle.net/5p6xo6fh/和https://jsfiddle.net/zdmxcb5g/