gpt4 book ai didi

html - Django 模板标签破坏了 css 输出

转载 作者:太空宇宙 更新时间:2023-11-04 12:29:34 25 4
gpt4 key购买 nike

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

这是 .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;
}

错在哪里? (为了它的值(value),我将 Django 1.7 与 Python 3.4 结合使用)

最佳答案

<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>

关于html - Django 模板标签破坏了 css 输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27762516/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com