我是网站编码的新手,目前正在做作业。
我的问题是,当鼠标悬停在我的导航栏上时,悬停颜色没有完全覆盖整个元素。我该如何解决这个问题?它是由于我的 Logo 而发生的吗?
我的 html 代码:
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(134, 35, 35);
font-family: Megrim, cursive;
font-weight: bold;
}
/* floats navigation buttons to the right */
.naviright {
float: right;
}
/*makes elements start from the left*/
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navigation li a:hover:not(.active) {
background-color: #111;
}
.navigation li a:hover:active {
background-color: #4CAF50;
}
/*TopNav End*/
/*logo*/
#logo {
width: 40px;
height: 40px;
overflow: hidden;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 2px;
}
#logoname {
color: rgb(255, 255, 255);
font-size: 20px;
}
<nav>
<ul class="navigation">
<li id="logo"><img src="images\logo.svg"></li>
<li id="logoname"><a>Stationery Haven</a></li>
<div class="naviright">
<li><a href="index3.html">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact Us</a></li>
</div>`enter code here`
</ul>
</nav>
最佳答案
给li a加上行高
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
line-height:22px;
}
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(134, 35, 35);
font-family: Megrim, cursive;
font-weight: bold;
}
/* floats navigation buttons to the right */
.naviright {
float: right;
}
/*makes elements start from the left*/
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
line-height:22px;
}
/* Change the link color to #111 (black) on hover */
.navigation li a:hover:not(.active) {
background-color: #111;
}
.navigation li a:hover:active {
background-color: #4CAF50;
}
/*TopNav End*/
/*logo*/
#logo {
width: 40px;
height: 40px;
overflow: hidden;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 2px;
}
#logoname {
color: rgb(255, 255, 255);
font-size: 20px;
}
<nav>
<ul class="navigation">
<li id="logo"><img src="images\logo.svg"></li>
<li id="logoname"><a>Stationery Haven</a></li>
<div class="naviright">
<li><a href="index3.html">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact Us</a></li>
</div>`enter code here`
</ul>
</nav>
关于html - 导航栏中按钮下方不需要的间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47363738/