Django 模板标签中断 css 输出

Question

这是在网页顶部放置固定导航栏的尝试。 .html 中有一个 {% if %} 语句影响 .css 渲染。

这是.html内容：

<body>
    <div class="navbar">
        <div class="nav-div" id="site-links">
            <ul>
                <li><a href="{% url 'index' %}">Home</a></li>
                <li><a href="/this_site/about/">About</a></li>
            </ul>
        </div>
        <div class="nav-div" id="auth-links">
            {% if user.is_authenticated %}
                <ul>
                    <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li>
            {% else %}
                    <li><a href="{% url 'auth_login' %}">Login</a></li>
                    <li><a href="{% url 'registration_register' %}">Register</a></li>
                </ul>
            {% endif %}
        </div>
    </div>
    <div>
        {% block body_block %}{% endblock %}
    </div>
</body>

在这种情况下，<div> 元素在呈现页面时没有水平对齐，因为 class="nav-div" 中的 <ul> 没有被 css 处理（没有红色边框）。

当我删除 {% if %} 标签时，它会正确呈现，如下所示：

<body>
    <div class="navbar">
        <div class="nav-div" id="site-links">
            <ul>
                <li><a href="{% url 'index' %}">Home</a></li>
                <li><a href="/this_site/about/">About</a></li>
            </ul>
        </div>
        <div class="nav-div" id="auth-links">
                <ul>
                    <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li>
                    <li><a href="{% url 'auth_login' %}">Login</a></li>
                    <li><a href="{% url 'registration_register' %}">Register</a></li>
                </ul>
        </div>
    </div>
    <div>
        {% block body_block %}{% endblock %}
    </div>
</body>

为了说明，我在 .css 文件:

中的列表元素中添加了边框

.navbar {
    background-color: #191A14;
    height: 10%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    }

.navbar a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    }

.navbar ul {
    list-style-type: none;
    border: 1px solid red;
    }

.navbar li {
    display:inline-block;
    border: 2px solid yellow;
    }

.nav-div {
    width: 45%;
    border: 3px solid green;
    }

#site-links {
    float: left;
    }

#auth-links {
    text-align: right;
    float: right;
    }

哪里出错了？（对于它的价值，我将 Django 1.7 与 Python 3.4 一起使用）

Answer 1

将 <ul> 标签放在 {% if %} 标签之外：

<ul>
    {% if user.is_authenticated %}
        <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li>
    {% else %}
        <li><a href="{% url 'auth_login' %}">Login</a></li>
        <li><a href="{% url 'registration_register' %}">Register</a></li>
    {% endif %}
</ul>

Django 模板标签中断 css 输出

Django template tags disrupting css output

html

css

django