Question

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

在牌外，名单很好

但是当我把相同的html视为ui card时，它会像这样

我有一个用于说明问题的codepen（https://codepen.io/anon/pen/zWmZOr）

使用semantic-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>

Answer 1

此选择器似乎对您造成了问题：

.ui.horizontal.list>.item

因为它增加了一个保证金 - 不应该存在。

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

This screen cap of the inspector should make it clearer

我建议不要在水平列表中使用.item，或者那样做。

祝你好运！

语义ui水平列表似乎在卡片中被打破

1 个答案: