语义 UI 水平卡片

Question

使用下面的代码，我得到垂直卡片，一张在另一张之上：

<div class="ui container">
      <div class="ui card">
        <div class="card header">
        Card1
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card2
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card3
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card4
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card5
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card6
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card7
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card8
        </div>
      </div>
</div>

在这里检查这个小提琴

我需要的是将这些卡片无限地并排放置。如果卡片的总宽度超过窗口宽度，水平条应该出现以允许我水平滚动，但卡片绝不能进入另一个卡片。

我怎样才能在 Semantic UI 中实现呢？使用 grid 会限制我的卡片数量，所以肯定有另一个我不知道的解决方案。

谢谢你的帮助。

Answer 1

尝试这个

.ui.container {
  overflow: auto;
  white-space: nowrap;
}
.ui.card {
  display: inline-block;
}