[英]Django template tags disrupting css output
试图将固定的导航栏放置在网页顶部。 .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>
元素不会水平对齐,因为CSS不会处理class="nav-div"
的<ul>
(无红色边框)。
当我删除{% 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文件的list元素中添加了边框:
.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)
将<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.