Réglage de la largeur du menu déroulant sur auto

Question

Ma question est mieux décrite par JSFiddle simple. Tout ce que je veux faire est de faire en sorte que la largeur de mon menu déroulant dépende de la largeur de son contenu afin que toutes les étiquettes d'options soient sur une seule ligne sans sauts de ligne.

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

Essayez d'ajouter la règle white-space: nowrap; à votre menu déroulant.

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