HTMLテンプレート内でDIVをインラインで右から同じオフセットで表示させるにはどうすればよいですか？私のHTMLテンプレートの

Question

私はカテゴリとサブカテゴリのリストを持っています。 各カテゴリは0〜nのサブカテゴリを持つことができます。

2つのループを1つのループ内で表示します。

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

また、各カテゴリとサブカテゴリに固有のドロップダウンメニューもあります。

私の問題は、私が何をしても、私のドロップを強制的に次の行から始めることはできません。 これは、それが今のように見える方法です：

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

参照してください。スクリーンショット：。 私の目標は、彼らがお互いの下に並ぶ持っているだけでなく、カテゴリまたはサブカテゴリと同じ行にドロップダウンを持つことである（すべての。すべてのサブカテゴリが最も右側にオフセットが、一部は固定となります場合には、カテゴリのドロップダウンが最も右側になります

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

これは私のhtmlです：

私はところで、他のデザインのアイデアを可視

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

を切り替えるために使用

スクリプトは歓迎されています。私はDjangoフレームワークとブートストラップとJQueryを使用します。

Answer 1

私はdropdownのクラスにpull-rightを追加すると、それが適切な整列を得ると考えている：<div class="dropdown pull-right">

は、サブカテゴリのための右からのインデントを取得し、それらの要素にいくつかmargin-rightを追加します。 .nav-list .nav-list .dropdown {margin-right: 10px;}