这是我的 css 代码(用于索引页):
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
/*NAVBAR (begin)*/
a {
text-decoration: none;
}
nav {
font-family: Arial;
background-color: Black;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
display: block;
float: left;
padding: 27px;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 27px;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
/*NAVBAR (end)*/
这是 HTML(索引页)的代码:
<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li><a href="index.html">Home</a></li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li><a href="mechanics.html">Mechanics</a></li>
<li><a href="construction.html">Construction</a></li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li><a href="grand.html">Grand</a></li>
<li><a href="upright.html">Upright</a></li>
<li><a href="electric.html">Electric</a></li>
</ul>
</li>
<li><a href="historypianos.html">History of the piano</a>
</li>
<li><a href="pianosongs.html">Piano songs</a>
</li>
</div>
</nav>
<!--(end)NAVBAR-->
</body>
</html>
我已经尝试了很多东西，但似乎没有任何效果...... 现在我的索引页面看起来像这样:
(Index page but I had to cut it because the full picture was over 2 mb)
(对不起，这真的很糟糕，但这是我第一次用 html 和 css 制作网站)。
我需要将导航栏居中并能够单击框而不是单词。 感谢您阅读(也许还有回答)!
最佳答案
首先，我建议使用类而不是直接元素选择器，
如果你想让导航居中，你只需要在主导航的父div中设置属性align-text: center。如果您想单击所有框而不是仅单击文本，则需要填充和边距的元素是 a 而不是 li。
检查片段:
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
.navwrapperindex {
text-align: center;
}
.navwrapperindex > nav{
display: inline-block;
}
a {
text-decoration: none;
}
nav {
font-family: Arial;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
float: left;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
padding: 27px;
display: block;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li><a href="index.html">Home</a></li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li><a href="mechanics.html">Mechanics</a></li>
<li><a href="construction.html">Construction</a></li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li><a href="grand.html">Grand</a></li>
<li><a href="upright.html">Upright</a></li>
<li><a href="electric.html">Electric</a></li>
</ul>
</li>
<li><a href="historypianos.html">History of the piano</a>
</li>
<li><a href="pianosongs.html">Piano songs</a>
</li>
</ul>
</nav>
</div>
</nav>关于html - 不能居中导航栏，必须点击这个词本身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54099935/