语义ui下拉菜单中的内联项

Question

我有一个下拉菜单，我希望有一个列出颜色的子菜单。我更喜欢颜色列表只是带有颜色的圆圈（没有名字）。为了节省垂直空间，我想连续说4或5（总共有14种颜色）。到目前为止，我没有运气，我已经接近了（见下面的代码）但是菜单太宽了我似乎无法弄清楚它是如何获得它的宽度的CSS：

// define your functions
function foo(myCallback){
    myCallback();
}

function bar(callback){
    var result = foo(function(){
        var result = "hello"; 
        callback(result);
    });
}

// now run it
bar(function(showResult){
    alert(showResult);
});

Answer 1

我最终在Semantic UI gitter聊天频道的某个人的帮助下为自己解决了这个问题：

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

现在看起来像这样：