奇怪的空白在顯示：塊元素

Question

有它保留我的所有顯示器下方出現一些奇怪的空白：塊元素。這是爲了meganavigation。我不知道是什麼導致了這一點。基本上，我在下面有代碼（還有一些決定列寬），當它生成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

那麼多的原因可能是這種空白的原因。

幫自己一個忙，右鍵單擊空白區域，然後單擊「檢查元素」，並從那裏，檢查右側（CSS代碼），是什麼導致了那白色的空間出現。這可能是一些保證金或填充問題。

總是更喜歡使用的元件檢查。

Answer 2

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

因爲所有鋰標籤的高度應該在旅遊的情況下同樣達到你想要的東西。希望你能理解。