我想将每个语义ui项放入一个段中.什么是在语义ui / html中执行此操作的正确方法？我应该将项目放入细分市场,细分项目内部,还是两者都没有？
项目
物品代码：
<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>
解决方法
语义UI项目和段不是为了一起工作而设计的(我只是遇到了同样的问题)所以我的解决方法是将必要的css添加到应用于.ui.segment.item元素的样式表中(你也可以将它放入scss模板并使用scss变量进行颜色,间距等,而不是将其编译为您网站的自定义semantic-ui构建版本.
那么你可以将.item和.segment样式应用于那些你想要同时具有这两种样式的块(对于任何变体,如堆积或紧凑,你当然也必须将这些变体包括为自定义样式).
我是这样做的,因为一个段的样式是相当自包含的,但是一个项目的样式非常广泛,因此它们将更难以准确地再现.
内置的代码运行器似乎没有正确显示,所以这是一个小提琴与相同的代码正常工作：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,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>
“`