这里的新人对于编码还不是很了解。有人可以告诉我如何在不弄乱任何东西的情况下集中列表项目,谢谢。
ul.topnav {
list-style-type: none;
margin: 0;
padding: 15;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 19px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}

答案 0 :(得分:2)
只需将countries = Countries.objects.values('region', 'id').order_by('-region')
total_countries = Countries.objects.count()
print(total_countries)
print(countries.query)
return render(req, 'worldApp/index.html', context={'countries':countries})
更改为ul.topnav li {float: left;}
,然后将ul.topnav li {display: inline-block;}
添加到text-align: center;
。所以样式表看起来像这样:
ul.topnav
答案 1 :(得分:1)
您可以在display: flex
:
nav
.ul.topnav {
display:flex;
justify-content: center;
}
但是如果您添加HTML,我可以帮助您更多。
答案 2 :(得分:1)
我建议的方法是将ul包装在<nav>
元素中,然后将<ul>
视为内联块元素。这将为您提供一系列良好的浏览器兼容性。
您可以在this jsfiddle
上看到演示但它是这样的:
HTML:
<nav class="navbar">
<ul class="topnav">
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test</a>
</li>
</ul>
</nav>
CSS(只是改变的部分):
.navbar {
text-align: center;
width: 100%;
background-color: #333;
}
ul.topnav {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
答案 3 :(得分:0)
我没有测试它,但如果它有帮助......
ul.topnav {
list-style-type: none;
margin: 0;
height:100px;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left; width:auto; height:100%;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
line-height:100px;
text-decoration: none;
transition: 0.3s;
font-size: 19px;
padding-left:10px;
padding-right:10px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}