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

Question

我有一个下拉菜单，我想要一个列出颜色的子菜单。我更喜欢颜色列表只是其中包含颜色的圆圈（没有名称）。为了节省垂直 space 我想连续说 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 聊天频道的某个人的帮助下，我最终自己解决了这个问题：

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

现在看起来像这样：

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

Inline items in semantic ui dropdown menu

html

css

semantic-ui