HTML 导航未按预期工作答案

【问题标题】：HTML Nav isn't working as expectedHTML 导航未按预期工作
【发布时间】：2023-03-21 08:01:01
【问题描述】：

我正在使用 HTML nav 标记在我的网站中显示面包屑（基于 Django/Bootstrap 构建）。

我正在尝试显示Shop by Departments 的下拉菜单，然后显示面包屑。但是有人，顺序混淆了。 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 -->

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

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

【问题讨论】：

呈现的 HTML 是什么样的？第一个include 里面有ul 吗？
@putvande 已经更新了带有输出的问题。
这是无效的 HTML，因为您的 li class="breacrumb-nav-holder" 没有所需的父 ul。
完美。添加它作为我接受它的答案？ @putvande

标签： html css django twitter-bootstrap

【解决方案1】：

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

【讨论】：