html - 语义 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

在 Semantic UI gitter 聊天 channel 的某个人的帮助下，我最终自己解决了这个问题:

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

现在看起来像这样: