セマンティックUIセグメントのサイズの問題

Question

ちょっとちょっと私はコンテンツの周りだけにセグメントをサイズしようとしているし、ページの全体の幅を埋めることはありません。 Iveはすべてを試みました。私はそれを得ることができません。セグメントのサイズを変更するにはどうすればよいですか？別の部門に入れる必要がありますか？または、シンプルな意味の修正がいくつかありますか？

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">  
 

 

 

 
<div class="ui segment"> 
 
    
 
    <div class="ui middle aligned grid child"> 
 

 
    <div class="column"> 
 
    <div class="ui center aligned page grid"> 
 

 
     <div class="eight wide column"> 
 

 
     <div class="ui two column middle aligned very relaxed stackable grid"> 
 
      <div class="ui vertical divider"> 
 
      Or 
 
      </div> 
 

 
      <div class="column"> 
 
      <div class="ui form"> 
 

 
       <div class="field"> 
 
       <label>Username</label> 
 
       <div class="ui left icon input"> 
 
        <input type="text" placeholder="Username"> 
 
        <i class="user icon"></i> 
 
       </div> 
 
       </div> 
 
       <div class="field"> 
 
       <label>Password</label> 
 
       <div class="ui left icon input"> 
 
        <input type="password"> 
 
        <i class="lock icon"></i> 
 
       </div> 
 
       </div> 
 

 
       <div class="ui blue submit button">Login</div> 
 
      </div> 
 
      </div> 
 

 
      <div class="center aligned column"> 
 
      
 
      <div class="ui big green labeled icon button"> 
 
       <i class="signup icon"></i> Sign Up 
 
      </div> 
 

 
      </div> 
 
     </div> 
 

 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

あなたのセグメントにdisplay: inline-blockを適用すると、それが必要として、それが唯一のように多くのスペースを取るようになります。

この例では、要素が不必要に狭いサイズになってしまいます。プロパティをsegment自体または重要と思われる要素に適用してみてください。

Answer 2

kitchen sinkのように、セグメントにcompactクラスを追加します。

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