导航栏不会居中,我错过了什么吗?
Navbar will not center, am I missing something?
这是我尝试自己建立的第一个网站。它主要用于练习以磨练我的技能。我已经尝试了几种不同的推荐方法来使这个导航菜单居中,但没有任何效果。到目前为止,这是我的代码。我觉得我缺少了一些非常明显的东西。
.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>
这是我尝试自己建立的第一个网站。它主要用于练习以磨练我的技能。我已经尝试了几种不同的推荐方法来使这个导航菜单居中,但没有任何效果。到目前为止,这是我的代码。我觉得我缺少了一些非常明显的东西。
.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>