将下拉菜单宽度设置为自动

Question

我的问题最好用简单的JSFiddle来描述。我想做的就是让我的下拉菜单宽度取决于其内容宽度，以便所有选项标签都在单行上而不会换行。

JSFiddle

<div>
  <span style='cursor:pointer; float:right'>
                                    <div class="btn-group pull-right">
                                        <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-cog"></span>
  </button>
  <ul style = 'padding:10px' class="dropdown-menu">
    <li class="dropdown-submenu">
      <input id="full_package_filter" type="checkbox" name="vehicle" checked>С полным пакетом документов<span class='useful_stat'></span>
      <br>
      <input id="not_full_package_filter" type="checkbox" name="vehicle" checked>С неполным пакетом документов<span class='useful_stat'></span>
      <br>
    </li>
    <li class="dropdown-submenu"></li>
    <li class="dropdown-submenu"></li>
    <li class="dropdown-submenu"></li>
  </ul>
</div>
</span>
</div>

Answer 1

尝试将white-space: nowrap;规则添加到下拉菜单中。

.dropdown-submenu {
  white-space: nowrap;
}