ドロップダウンメニューの幅を自動に設定する

Question

私の質問は簡単なJSFiddleで最もよく説明されています。私がしたいのは、私のドロップダウンメニューの幅を内容の幅に依存させて、すべてのオプションラベルが改行なしで1行になるようにすることだけです。

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