语义 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>

勾选this fiddle here

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

如何在 Semantic UI 中完成？使用网格会限制我的卡片数量，因此必须有另一种我不知道的解决方案。

感谢您的帮助。

Answer 1

只是在这里大声思考，但根据您 HTML 的当前配置，我认为它可能将布局默认为块格式。为了解决这个问题，请尝试进行以下更改，同时允许水平滚动：

.ui.card { display: inline-block; overflow-x: scroll; }

添加溢出滚动应该会为您的卡片添加水平滚动机制。希望这对您有所帮助！

Answer 2

试试这个

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

语义 UI 横向卡片

Semantic UI horizontal cards

html

css

semantic-ui