HTML 导航未按预期工作

Question

我使用 HTML nav 标签在我的网站中显示面包屑(基于 Django/Bootstrap)。

我正在尝试显示按部门购物 的下拉菜单，然后显示面包屑。但是有人，顺序搞错了。 Shop by Departments 最后出现而不是第一个。

我的代码是:

<div class="animate-dropdown">
<!-- ========================================= BREADCRUMB ========================================= --><div id="top-mega-nav">
<div class="container">
    <nav>
    {% include "partials/nav_primary.html" with expand_dropdown=0 %}
    <li class="breadcrumb-nav-holder">
        <ul>
        {% with category=product.categories.all.0 %}
            {% for c in category.get_ancestors_and_self %}
                <li class="breadcrumb-item">
                    <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
                </li><!-- /.breadcrumb-item -->
            {% endfor %}
            <li class="active">{{ product.title }}</li>
            {% get_back_button as backbutton %}
            {% if backbutton %}
                <li class="pull-right">
                    <a href="{{ backbutton.url }}">
                        <i class="icon-arrow-left"></i> {{ backbutton.title }}
                    </a>
                </li>
            {% endif %}
        {% endwith %}

        </ul>
    </li><!-- /.breadcrumb-nav-holder -->
    </nav>
    </div>
</div><!-- /.container -->

我使用检查器检查了网页，代码顺序符合预期。但是渲染不是。这里有什么问题吗？

编辑:检查器中的输出看起来像

Answer 1

您呈现的 HTML 无效。这可能是导致问题的原因。li 元素必须有父 ul(或 ol)元素。因此，如果您在 li class="breacrumb-nav-holder" 周围添加一个 ul，它应该可以正常工作。