Html 如何使用语义UI防止卡片包装到下一行？

我希望我的所有卡片视图仅水平显示。使用Semantic中的示例：

<div class="ui four cards">
 <div class="card">
   <div class="image">
     <img>
   </div>
   <div class="extra">
     Rating:
     <div class="ui star rating" data-rating="4"></div>
   </div>
 </div>
  ....
</div>

评级：
....

如果我有四张以上的卡，我希望前四张卡的大小相等，然后剩余的卡可以通过水平滚动条访问。我不想让其他卡片排在下面。我如何防止语义对卡片的包装

---

谢谢

我也有同样的问题。你是怎么解决的？