所以我似乎遇到了悬停功能的问题。当我的屏幕是全尺寸时,我可以将鼠标悬停在菜单选项上,整个背景颜色会发生变化。但是,当我调整屏幕大小时,只有一部分背景颜色发生变化。我在屏幕调整大小时看到了这个:
这是HTML代码
<nav>
<ul>
<li><a href="index.html" class="currentlink">Home</a></li>
<li><a href="gettingstarted.html">Getting Started</a></li>
<li><a href="surviveandthrive.html">How Do Plants Thrive?</a></li>
<li><a href="problems.html">Common Problems</a></li>
<li><a href="indoorplants.html">Great Indoor Plants</a></li>
<li><a href="references.html">References</a></li>
</ul>
<nav>
和css
nav {
width: 100%;
background: #003300;
border: 1px solid #ccc;
border-right: none;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
width: 16.6667%; /* fallback for non-calc() browsers */
width: calc(100% / 6);
box-sizing: border-box;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
padding: 10px 0;
}
nav ul li a:hover {
background-color: #00b300;
width:100%;
}
.currentlink {
background: #00b300;
}
提前感谢您提供的任何帮助!
答案 0 :(得分:0)
这是因为您的第三个a
文字包含在两行上
正如@dmitry建议的那样,我也会使用flexbox。我们做一些修改。
首先,我们需要box-sizing: border-box
我们的元素及其子元素
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
接下来,我们希望nav
和ul
为wull宽度,我们将display: flex;
应用于最后一个
nav {
width: 100%;
}
nav ul {
display: flex;
align-items: center;
width: 100%;
}
最后,我们需要a
覆盖全高;
nav ul li a {
height: 100%;
}
查看此fiddle。
答案 1 :(得分:0)
通过测试您的代码,问题似乎是您的列表项根据其内容分配高度。因此,当您调整窗口大小时,强制将一个或多个列表项中的文本换行时,包含文本的列表项比包含较少或不包含文本的列表项高。
根据您希望如何设置导航样式,一种可能的解决方案是使用CSS&#39; flex
样式。对于CSS,请尝试以下操作:
nav {
border: 1px solid #ccc;
border-right: none;
}
nav ul {
background: #003300;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 0;
-webkit-flex-flow: row wrap;
}
nav ul li {
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
box-sizing: border-box;
font-weight: bold;
padding: 5px;
text-align: center;
width: 16.6667%;
/* fallback for non-calc() browsers */
width: calc(100% / 6);
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background-color: #00b300;
}
nav ul li a {
color: white;
text-decoration: none;
}
.currentlink {
background: #00b300;
}
对于您的HTML,因为我们无法为<a>
分配高度,请将class="currentLink"
移至<a>
的父级<li>
,以便它看起来如下:
<li class="currentlink"><a href="index.html">Home</a></li>
要查看全部内容,请查看此jsfiddle。