セマンティックUIドロップダウンメニューのインラインアイテム

Question

私はドロップダウンメニューを持っており、色をリストするサブメニューがあります。私は色のリストを色の入ったサークル（名前なし）にするほうが好きです。そして、縦のスペースを節約するために、私は4つまたは5つの行（全部で約14色があります）を言いたいと思います。これまでのところ、私は近くに来て運がないよ（以下のコードを参照してください）が、メニューが広すぎると、私はそれはCSSでその幅を取得しています方法を見つけ出すように見えることはできません。

<div class="item"> 
    <i class="paint brush icon"></i>Colour 
    <div class="compact menu"> 
    <div class="ui two column padded grid"> 
     <div class="column"> 
     <a class="item"> 
     <div class="ui red empty circular label"></div> 
     Red 
     </a> 
     </div> 
     <div class="column"> 
     <a class="item"> 
     <div class="ui orange empty circular label"></div> 
     Orange 
     </a> 
     </div> 
     <div class="column"> 
     <a class="item"> 
     <div class="ui yellow empty circular label"></div> 
     Yellow 
     </a> 
     </div> 
     <div class="column"> 
     <a class="item"> 
     <div class="ui olive empty circular label"></div> 
     Olive 
     </a> 
     </div> 
     <div class="column"> 
     <a class="item"> 
     <div class="ui green empty circular label"></div> 
     Green 
     </a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

私はセマンティックUIのギッターのチャットチャンネルにいる誰かの助けを借りて、自分のためにそれを働くことになった：

<div class="item colour"> 
    <i class="paint brush icon"></i>Colour 
    <div class="ui icon left menu"> 
     <a class="item" title="Red" data-colour="red"> 
     <i class="red circle fitted icon"></i> 
     </a> 
     <a class="item" title="Orange" data-colour="orange"> 
     <i class="orange circle fitted icon"></i> 
     </a> 
     <a class="item" title="Yellow" data-colour="yellow"> 
     <i class="yellow circle fitted icon"></i> 
     </a> 
     <br> 
     <a class="item" title="Olive" data-colour="olive"> 
     <i class="olive circle fitted icon"></i> 
     </a> 
     <a class="item" title="Green" data-colour="green"> 
     <i class="green circle fitted icon"></i> 
     </a> 
     <a class="item" title="None" data-colour=""> 
     <i class="red ban fitted icon"></i> 
     </a> 
    </div> 
</div> 

それは、次のカスタムCSSが必要です。

.ui.dropdown .item.colour { 
    > .icon.menu { 
    font-size: 0; 

    > .item { 
     display: inline-block; 
    } 
    } 
} 

それは次のようになります。