html - 导航栏不会居中,我错过了什么吗?
问题描述
这是我尝试自己构建的第一个站点。它主要用于练习以磨练我的技能。我尝试了几种不同的推荐方法来使这个导航手册居中,但没有任何效果。到目前为止,这是我的代码。我觉得我缺少一些非常明显的东西。
.topnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
overflow: hidden;
background-color: antiquewhite;
border-radius: 15px;
}
.topnav ul {
padding: 0;
margin: 0;
width: 800px;
list-style: none;
}
.topnav li a {
float: left;
margin: auto;
display: block;
color: black;
text-align: center;
padding: 8px 16px;
text-decoration: none;
font-size: 17px;
border-radius: 15px;
}
.topnav a:hover {
background-color: white;
color: black;
}
.topnav a.active {
background-color: lightgrey;
color: black;
}
<body>
<header>
<h1>The Chromeria</h1>
<nav class="topnav">
<ul>
<li><a class="active" href="Chromeria%20Home.html">The Chromeria</a></li>
<li><a href="The%20Books.html"> Books </a></li>
<li><a href="Characters.html"> Characters </a></li>
<li><a href="Locations.html"> Locations </a></li>
<li><a href="Luxin.html"> Luxin </a></li>
<li><a href="Forums.html"> Forums </a></li>
</ul>
</nav>
</header>
解决方案
有很多要改变的。请查看下面片段中的 CSS 代码。最重要的事情:没有浮动,内联块与内联显示,没有固定宽度ul
,没有自动边距,文本对齐:容器的中心和其他:
.topnav {
width: 100%;
margin: 0;
background-color: antiquewhite;
border-radius: 15px;
text-align: center;
}
.topnav ul {
padding: 0;
list-style: none;
}
.topnav li {
display: inline-block;
padding: 8px 0;
}
.topnav li a {
display: block;
padding: 8px 16px;
color: black;
text-decoration: none;
font-size: 17px;
border-radius: 15px;
}
.topnav a:hover {
background-color: white;
color: black;
}
.topnav a.active {
background-color: lightgrey;
color: black;
}
<h1>The Chromeria</h1>
<nav class="topnav">
<ul>
<li><a class="active" href="Chromeria%20Home.html">The Chromeria</a></li>
<li><a href="The%20Books.html"> Books </a></li>
<li><a href="Characters.html"> Characters </a></li>
<li><a href="Locations.html"> Locations </a></li>
<li><a href="Luxin.html"> Luxin </a></li>
<li><a href="Forums.html"> Forums </a></li>
</ul>
</nav>
推荐阅读
- python - 如何编写与以下 R 代码等效的 Python/Pandas?
- javascript - 在 JavaScript for 循环中重新分配/声明一个 const 变量并使用不同的值多次保存它?
- sql - 通过“+”和“||”将两列中的项目连接起来有什么区别 对于 SQL
- laravel - 如何在测试中获取使用 Laravel Livewire 上传的文件的哈希名称
- javascript - 类实例化过程
- javascript - 数组需要根据键值对删除重复对象并返回 sum [fiddle]
- google-chrome - Chrome.identity 无需提供凭据即可完美运行
- javascript -
- python - Splitting string by more empty lines
- makefile - Makefile依赖而不声明规则?