javascript - 如何强制 DIV 在我的 HTML 模板中以内联方式显示并与右侧的偏移量相同？

Question

在我的 HTML 模板中。我有一个类别和子类别列表。 每个类别可以有 0 到 n 个子类别。

我在 2 个 for 循环中一个一个地显示它们。

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:

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

我用来切换可见性的脚本

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

顺便说一句，欢迎任何其他设计想法。我使用 Django Framework 和 bootstrap 以及 JQuery。

Answer 1

我相信添加 pull-right到 dropdown 的类(class)将使其正确对齐:<div class="dropdown pull-right">

要从右侧获得子类别的缩进，请添加一些 margin-right到那些元素。 .nav-list .nav-list .dropdown {margin-right: 10px;}