Anlamsal menü açılır menüdeki satır içi öğeler

Question

Bir açılır menümüz var ve renkleri listeleyen bir alt menüye sahip olmak istiyorum. Renklerin listesini sadece içindeki renkle (isimler içermeyen) daireler olarak tercih ederim. Ve dikey alandan tasarruf etmek için üst üste 4 veya 5 demek istiyorum (hepsinde yaklaşık 14 renk var). Şimdiye kadar ben yaklaştım hiç şans yaşıyorum (aşağıdaki kodu bakınız) ama menü çok geniş olduğunu ve bunu CSS onun genişliğini gidiyor anlamaya gibi olamaz:

<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

Ben Semantik UI gitter sohbet kanalında refakatçi yardımıyla kendim için çalışma sona erdi:

:

<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> 

aşağıdaki özel CSS gerektirir 0

Şimdi şuna benzer: