语义 ui 水平列表似乎在卡片中损坏答案

【问题标题】：semantic ui horizontal list seems broken in cards语义 ui 水平列表似乎在卡片中损坏
【发布时间】：2018-04-05 20:47:32
【问题描述】：

我试图在卡片中获取水平 ui 列表，但布局完全错误

除了一张卡片，列表就好了

但是当我将相同的 html 放在 ui card 之外时，它会变成这样

我有一个说明问题的代码笔 (https://codepen.io/anon/pen/zWmZOr)

使用语义-ui 2.3.1

我想知道是否有人知道我做错了什么，或者这是语义用户界面的限制或错误

谢谢

html 在这里

<body>
  <div class="ui horizontal list">
    <div class="item">
      <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
      <div class="content">
        <div class="header">Tom</div>
        Top Contributor
      </div>
    </div>
    <div class="item">
      <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
      <div class="content">
        <div class="header">Christian Rocha</div>
        Admin
      </div>
    </div>
    <div class="item">
      <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
      <div class="content">
        <div class="header">Matt</div>
        Top Rated User
      </div>
    </div>
  </div>
  <div class="ui cards">

    <div class="ui card">

      <div class="content">
        <div class="ui horizontal list">
          <div class="item">
            <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
            <div class="content">
              <div class="header">Tom</div>
              Top Contributor
            </div>
          </div>
          <div class="item">
            <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
            <div class="content">
              <div class="header">Christian Rocha</div>
              Admin
            </div>
          </div>
          <div class="item">
            <img class="ui avatar image" src="https://www.gravatar.com/avatar/94d093eda664addd6e450d7e9881bcad?s=32&d=identicon&r=PG">
            <div class="content">
              <div class="header">Matt</div>
              Top Rated User
            </div>
          </div>
        </div>
      </div>
    </div>

</body>

【问题讨论】：

标签： css semantic-ui

【解决方案1】：

这个选择器似乎给你带来了问题：

.ui.horizontal.list>.item

因为它在不应该的地方添加了一个margin-left。

第一个没有这个问题的原因是因为它被 first-child psuedo 选择器作为目标。

This screen cap of the inspector should make it clearer

我建议不要在水平列表中使用 .item 或类似的东西。

祝你好运！

【讨论】：