DIV'nin HTML şablonumda satır içi ve aynı ofsette sağa nasıl görünmesi gerekir? HTML şablonumda

Question

. Kategoriler ve alt kategorilerin bir listesini yaşıyorum. Her kategorinin 0 ile n alt kategorileri olabilir.

Bunları 2'de döngüler için birbirinin içinde görüntülerim.

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

Ayrıca, her kategori ve alt kategoriye özel olacak bir açılır menüye sahibim.

Bu yüzden benim problemim hiç bir ölçüm cihazının ne yaptığımın bir sonraki satırdan başlayamamaya zorlayamam. Bu şimdi gibi görünüyor:

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

bakınız ekran görüntüsü:. Amacım kategori veya yanı birbirleriyle altında hizalanmış olması alt kategorisi aynı çizgide açılan çıkışlar sahip olmaktır (Tüm Kategori açılan çıkışlar bazı sabit bir kayma ile tüm alt kategori en sağda olacak ama ne zaman en sağ tarafta olacak

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

Bu

benim 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> 

Senaryo ben görünürlük

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

açıktır BTW herhangi diğer tasarım fikri geçiş yapmak için kullanabilirsiniz. Django Framework ve bootstrap ve JQuery kullanıyorum.

Answer 1

Ben dropdown sınıflarına pull-right ekleyerek doğru hizalanmış alacak inanıyoruz: <div class="dropdown pull-right">

, alt kategori için sağdan girinti olsun bu elementlere bazı margin-right ekleyin. .nav-list .nav-list .dropdown {margin-right: 10px;}