有一些奇怪的空白一直出现在我的所有显示器下:块元素。这是一个meganavigation。我不知道造成这种情况的原因。基本上,我有下面的代码(加上一些更确定列宽的代码),当它生成meganav时,呈现为“display:block”的项目在它们下方有一个空格。当您将鼠标悬停在主导航中的项目上时也可以看到它。我不太清楚该怎么做。
natural
HTML:
a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
color: black;
text-decoration: none;
font-size: 10px;
display: block;
padding: 3px;
}
a:hover {
text-decoration: none;
color: white;
background-color: #c8a51b;
}
.nav {
background: #1b2c69;
width: 800px;
margin: 10px;
height: 30px;
}
.nav li {
list-style: none;
}
.nav > li {
padding: 0;
float: left;
position: relative;
}
.nav > li > a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 30px;
padding: 0 20px;
height: 43px;
text-transform: uppercase;
}
.nav > li:hover > a {
background: #FFF;
color: #1b2c69;
}
答案 0 :(得分:0)
请参阅this link
我已将bgcolor添加到背景中以查看空白区域。
修复方法是:
import util
在上面的CSS中,我将.nav > li > a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 30px;
padding: 0 20px;
height: 30px;
text-transform: uppercase;
}
更改为height: 43px;
因为所有li标签的高度在旅行箱中应该相同,以达到您想要的效果。希望你明白。
答案 1 :(得分:-1)
很多原因可能是造成这个空白的原因。
帮自己一个忙,右键点击空格,然后点击“检查元素”,然后从那里检查右侧(css代码),导致该空格出现的原因是什么。它可能是一些边距或填充问题。
始终更喜欢使用元素检查。