Question

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

项

商品代码：

<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

语义用户界面Items和Segments并非旨在协同工作（我刚遇到同样的问题）所以我的解决方法是将必要的css添加到应用于{{1}的样式表中} element（你也可以把它放到scss模板中，并使用scss变量来代替颜色，间距等，然后将它编译成你网站的semantic-ui自定义版本。）

那么你可以将.ui.segment.item和.item样式应用于那些你想拥有两种样式的块（对于.segment或piled等任何变体，你会当然也必须将这些变体包括为自定义样式。）

我是这样做的，因为片段的样式是相当自包含的，但是项目的样式非常广泛，因此它们更难以准确再现。

内置代码运行器似乎无法正确显示，因此这是一个相同代码正常工作的小提琴：https://jsfiddle.net/nw8nte4b/

```

compact

.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);
}

```

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

1 个答案: