html - 显示下奇怪的空白 :block Element

Question

有一些奇怪的空白不断出现在我的所有显示下: block 元素。这是一个大型导航。我不知道是什么原因造成的。基本上，我有下面的代码(加上一些确定列宽的代码)，当它生成 meganav 时，呈现为“display:block”的元素在它们下面有一个空格。您也可以在将鼠标悬停在主导航中的元素上时看到它。我不太确定该怎么做。

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;

}

HTML:

<ul class="nav">
<li><a href="#">Home</a>

</li>
<li><a href="#">Our Company</a>

<div class="tab1">
<div class="container-1">
<div class="col1"> <a href="#">Business Reports</a>

 <br> <a href="#">Core Values</a>

 <br> <a href="#">Corp Priority Updates</a>

 <br> <a href="#">Critical Success Factors</a>

 <br> <a href="#">Daily Reports</a>

 <br> <a href="#">EBIT Chart</a>

 <br> <a href="#">HyVisability Scorecard</a>

<br>  <a href="#">Mission Statement</a>

 <br> <a href="#">Quality Vision</a>

 <br> <a href="#">Strategic Vision</a>

 <br>
 </div>
 </div>
 </div>
</li>

Answer 1

参见 this link

我已将 bgcolor 添加到背景以查看空白区域。

修复是:

.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;

}

在上面的 css 中，我将 height: 43px; 更改为 height: 30px;

因为所有 li 标签的高度在旅游案例中应该相同才能达到您想要的效果。希望你明白。