セマンティックUIアイテムをHTMLのセグメントに入れる方法は？

Question

各セマンティクを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変数を使用して、これをサイト用のsemantic-uiのカスタムビルドにコンパイルすることもできます）。

それでは、あなたは（piledまたはcompactなどの任意の変動を、あなたはもちろんのあまりにカスタムスタイルとして、それらのバリエーションを含める必要があります）あなたは両方のスタイルを持っているしたいそれらのブロックに両方.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, 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>

`` `