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>元素不会水平对齐，因为<ul>中的class="nav-div"未由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输出

1 个答案: