Wie erzwinge ich, dass DIV inline und im gleichen Offset von rechts in meiner HTML-Vorlage erscheint?

Question

in meiner HTML-Vorlage. Ich habe eine Liste von Kategorien und Unterkategorien. Wo jede Kategorie von 0 bis n Unterkategorien haben kann.

Ich zeige diese in 2 für Schleifen eins in anderen.

Category 1 
    Subcategory 1 
    Subcategory 2 
Category 2 
    Subcategory 3 
    Subcategory 4 
    Subcategory 5 

Ich habe auch Dropdown-Menü, das für jede Kategorie und Unterkategorie spezifisch sein wird.

Also mein Problem, dass kein Meter, was ich tue, kann ich nicht zwingen, meine Drop-Down NICHT von der nächsten Zeile zu starten. Dies ist, wie es jetzt aussieht:

Category 1     
menu 
Subcategory 1  
menu 
Subcategory 2  
menu 
Category 2     
menu 
Subcategory 3  
menu 
Subcategory 4  
menu 
Subcategory 5  
menu 
Category 3     
menu 

siehe Screenshot. Mein Ziel ist es Drop-downs in der gleichen Zeile wie Kategorie oder Unterkategorie als auch haben sie untereinander ausgerichtet sind (All die Kategorie Dropdown-Menüs werden auf der äußersten rechten Seite sein, wenn alle Unterkategorie auf dem am weitesten rechts sein wird, aber mit einigen festen Offset

Category 1     menu 
    Subcategory 1  menu 
    Subcategory 2  menu 
Category 2     menu 
    Subcategory 3  menu 
    Subcategory 4  menu 
    Subcategory 5  menu 
Category 3     menu 

das ist mein html.

  <div class="well"> 
      <div style="overflow-y: scroll; overflow-x: hidden; height: 500px;"> 
       <ul class="nav nav-list"> 


       {% for category in page_category %} 
        {# Each "category" is a Category model object. #} 


       <li><label class="tree-toggler nav-header">Category:{{ category.name }} 

        <!--Menu dropdown Div--> 
         <div class="dropdown"> 
          <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
           <span class="glyphicon glyphicon-cog">Options</span> 
           <span class="caret"></span> 
          </a> 
          <ul class="dropdown-menu" aria-labelledby="dLabel"> 
           <li> <a href="{% url 'subcategory_new' pk=category.id %}">Create subcategory</a></li> 
           <li> <a href="{% url 'subcategory_new' pk=category.id %}">Delete</a></li> 
           <li> <a href="{% url 'subcategory_new' pk=category.id %}">Edit</a></li> 
          </ul> 
         </div> 

        </label> 

       <ul class="nav nav-list tree"> 

         <lh>Sub Category</lh> 

         {% for field in category.subcategory_set.all %} 

           <li>#{{ field.id }} {{ field.name }} - {{ field.description }} {{ field.keywords }} 

            <div class="dropdown"> 
             <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
              <span class="glyphicon glyphicon-cog">Options</span> 
              <span class="caret"></span> 
             </a> 

             <ul class="dropdown-menu" aria-labelledby="dLabel"> 
              <li><a href="{% url 'subcategory_new' pk=category.id %}">Create subcategory</a></li> 

              <li><a href="{% url 'company_new' %}">Delete</a></li> 
             </ul> 
            </div> 



         {% endfor %} 
         </ul> 
        </li> <li class="divider"></li><!--category li closing--> 


      {% endfor %} 
      </ul> 
     </div> 
    </div> 

Script Ich benutze Sichtbarkeit willkommen

$(document).ready(function() { 
    $('label.tree-toggler').click(function() { 
     $(this).parent().children('ul.tree').toggle(300); 
    }); 
}); 

BTW andere Design-Idee sind hin- und herzuschalten. Ich benutze Django Framework und Bootstrap und JQuery.

Answer 1

Ich glaube, dass pull-right den Klassen der dropdown Zugabe wird es richtig ausgerichtet erhalten: <div class="dropdown pull-right">

Um den Einzug von rechts für die Unterkategorien zu bekommen, einige margin-right auf diese Elemente hinzuzufügen. .nav-list .nav-list .dropdown {margin-right: 10px;}