如何设置语义 UI 下拉菜单的宽度

Question

如何设置语义 UI 搜索选择下拉菜单的宽度？ 我需要将语义 UI 搜索选择下拉列表的宽度设置为下拉列表中最长的元素。 任何帮助将不胜感激。

Answer 1

我使用了一个固定大小的包装器和一个嵌套在它里面的流体（扩展到适合父级的大小）下拉菜单

<div style="width: 250px;">
  <div class="ui fluid dropdown">
    <input type="hidden" name="country">
    <div class="default text">My Dropdown Text</div>
  </div>
</div>

Answer 2

尝试设置min-width而不是设置width 。 默认值为14em的min-width ，因此如果您希望具有较小的宽度，则需要覆盖它。

例子：

.ui.dropdown.search{
     min-width: /*smaller width here*/;
}

Answer 3

尝试使用 'compact' 属性，如下所示。 但是，它仅根据所选内容调整宽度。

<div class="ui compact selection dropdown">
  <i class="dropdown icon"></i>
  <div class="text">Compact</div>
  <div class="menu">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</div>