Question

我在Python中有以下代码：

<div id="sidebar-wrapper" class="container-fluid" style="background-color: lightgray">
  <nav id="spy" class="nav nav-pills navbar-stacked">
    <ul class="sidebar-nav nav">
      <li class="">
        <a href="{% url 'PHIproduct' %}" data-scroll="" class="">
            <span class="fa fa-anchor solo"><h3>Product List</h3></span>
        </a>
        <li class="">
            {% for i in loop_times_product %}
            <a href="{% url 'PHI' %}?id={{ i }}" data-scroll="" class="">
              <span class="fa fa-anchor solo" id="{{ i }}">{{ i|safe }}</span>
            </a>
            {% endfor %}
            <li class="">
              {% for i in loop_times %}
              <a href="{% url 'PHIc' %}?id={{ i }}" data-scroll="" class="">
                <span class="fa fa-anchor solo" id="{{ i }}">{{i|safe}}</span>
              </a> {% endfor %}
              <li class="">
                {% for i in loop_timesc %}
                <a href="{% url 'button' %}?id={{ i }}" data-scroll="" class="">
                  <span class="fa fa-anchor solo" id="{{ i }}">{i|safe}}</span>
                </a> {% endfor %}
              </li>
            </li>
        </li>
      </li>
    </ul>
  </nav>
</div>

主要目的是添加以下功能：

应用此代码后，单击产品A时，汽车和电机将不会显示，这意味着此部分代码未运行：

<li  class="">
{% for i in loop_timesc %}<a href="{% url 'button' %}?id={{ i }}" data-scroll="" class=""><span class="fa fa-anchor solo" id="{{ i }}">{{i|safe}}</span></a>
{% endfor %}
</li>

li代码是否有任何限制，或者我在这里写错了代码？任何人都可以帮我看看这个，因为我已经花了两天时间试图在这里找到错误但是失败了。

Answer 1

我没有详细检查你的代码，但有一件事突然出现在我面前：你将<li>元素直接嵌套在彼此中。你做不到; <li>需要成为<ol>或<ul>的直接子女。

暂时忘掉Python，只看一个简单的HTML示例。

无效：

<ul>
    <li>
        One
        <li>
            One A
        </li>
    </li>
</ul>

有效：

<ul>
    <li>
        One
        <ul>
            <li>
                One A
            </li>
        </ul>
    </li>
</ul>

您的代码中可能存在其他问题，但这肯定是需要解决的问题。

另一个提示：如果您正在处理这样的可疑HTML问题，其中一个问题可能是生成的HTML无效，请不要尝试从Python模板源代码中找出所有内容。相反，在浏览器中执行查看源，您可以在其中查看浏览器的确切内容。

实际上，您可以从“查看源”窗口执行“全选”和“复制”，然后粘贴到W3C HTML Validator以查看HTML是否有效。如果您生成无效的HTML，则所有投注均已关闭，因此首先要检查。

如果您将服务器代码（包括模板）与浏览器看到的实际下载的HTML分开处理，您将可以更轻松地进行调试。服务器生成 HTML代码;浏览器解析并呈现服务器生成的HTML代码。

对HTML <li>有任何限制吗？

1 个答案: