html - 如何将语义 ui 项目放入 html 中的段中？

Question

我想将每个语义 ui item 放入一个 segment 中。在语义 ui/html 中执行此操作的正确方法是什么？我应该将 item 放在 segment 中，将 segment 放在 item 中，还是两者都不放？

项目

项目代码:

<div class="ui divided items">
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">12 Years a Slave</a>
      <div class="meta">
        <span class="cinema">Union Square 14</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui label">IMAX</div>
        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">My Neighbor Totoro</a>
      <div class="meta">
        <span class="cinema">IFC Cinema</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
        <div class="ui label">Limited</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Watchmen</a>
      <div class="meta">
        <span class="cinema">IFC</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
      </div>
    </div>
  </div>
</div>

分割:

段代码:

<div class="ui segment">
</div>

Answer 1

语义 UI Items 和 Segments 不能协同工作(我刚遇到同样的问题)所以我的解决方法是将必要的 css 添加到我应用的样式表中到 .ui.segment.item 元素(您也可以将其放入 scss 模板中，并使用 scss 变量来设置颜色、间距等，而不是将其编译为语义 ui 的自定义构建您的网站)。

然后您可以将 .item 和 .segment 样式应用到那些您想要同时拥有这两种样式的 block (对于任何变体，例如 piled 或 compact，当然，您也必须将这些变体作为自定义样式包括在内。

我这样做是因为一个片段的样式相当独立，但是一个项目的样式非常广泛，因此它们将更难准确地复制。

内置的代码运行器似乎无法正确显示，所以这里有一个可以正常工作的相同代码的 fiddle :https://jsfiddle.net/nw8nte4b/

```

.ui.segment.item {
  position: relative;
  background: #fff;
  box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  margin: 1rem 0;
  padding: 1em;
  border-radius: 0.25rem;
  border: 1px solid rgba(34, 36, 38, 0.15);
}

<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />

<div class="ui centered padded grid">
  <div class="ten wide column">

    <div class="ui items">
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">12 Years a Slave</a>
          <div class="meta">
            <span class="cinema">Union Square 14</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui label">IMAX</div>
            <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
          </div>
        </div>
      </div>
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">My Neighbor Totoro</a>
          <div class="meta">
            <span class="cinema">IFC Cinema</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
            <div class="ui label">Limited</div>
          </div>
        </div>
      </div>
      <div class="ui item segment">
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">Watchmen</a>
          <div class="meta">
            <span class="cinema">IFC</span>
          </div>
          <div class="description">
            <p></p>
          </div>
          <div class="extra">
            <div class="ui right floated primary button">
              Buy tickets
              <i class="right chevron icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

```