如何将语义 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 不能一起工作（我只是运行进入同一个问题）所以我的解决方法是添加 requisite css 到我的应用于 .ui.segment.item 元素的样式表（您也可以将其放入 scss 模板并使用 scss 变量来设置颜色、间距等，而不是将其编译成自定义 build of semantic-ui for your site).

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

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

code runner 中的 built 似乎没有正确显示，所以这里有一个 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>

```

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

How to put semantic ui items into segments in html?

html

dom

semantic-ui