在我的導航欄中，我的活動按鈕和我的懸停按鈕沒有與我的導航欄對齊。有人可以幫我弄這個嗎？我該如何修復我的導航菜單條

這裏是鏈接在那裏我有測試此：

CSS：

<style type="text/css"> 


.cl{clear:both;} 

#navi{ 
    background:#0082c8; 
    position:relative; 
    margin-top:0; 
    list-style:none; 
    height:50px; 
} 


#navi > li{ 
float:left; 
margin:0 20px; 
position:relative; 
padding:14px 0; 
} 

#navi li a, .subnavi li a{ 
color:white; 
text-decoration:none; 
display:block; 
line-height:29px; 
padding:0 13px; 
font-size:16px; 
font-family:arial; 
text-shadow: 0px 2px 2px #034e9f; 
filter: dropshadow(color=#034e9f, offx=0, offy=2); 
} 

#navi > li:hover > a, #navi li a.active{ 
background-color:#009; 
height:50px; 
line-height:29px; 
display:block;    
} 

.subnavi{ 
position:absolute; 
display:none; 
top:50px; 
background:#0082c8; 
padding:10px 0; 
white-space:nowrap; 
list-style:none;  
} 

#navi li:hover .subnavi{ 
display:block; 
} 

#navi .subnavi li{ 
margin:0;} 

#navi .subnavi li a{ 
display:block; 
font-size:13px; 
padding:0 15px; 
border-radius:0; 
line-height:27px;} 


#navi .subnavi li a:hover{ 
padding:0 15px; 
border-radius:0; 
border-left:0; 
border-right:0; 
line-height:25px;} 


</style>

下面是HTML：

<body> 
    <ul id="navi"> 
    <li><a href="" class="active">Home Owners</a></li> 
    <li><a href="">Proffesionals</a> 
    <ul class="subnavi"> 
     <li><a href="">LInk 1</a></li> 
     <li><a href="">LInk 1</a></li> 
     <li><a href="">LInk 1</a></li> 
     <li><a href="">LInk 1</a></li> 
     <li><a href="">LInk 1</a></li>  
    </ul> 
    </li> 
    <li><a href="">Why Ventilate?</a></li> 
    <div class="cl"></div> 
    </ul> 
</body>

來源

2013-04-23 DWalk

工作小提琴：http://jsfiddle.net/3qPbE/65/

變化#navi > li和#navi li a，給#navi > li:hover > a, #navi li a.active正確的高度的墊襯。

#navi > li{ 
    float:left; 
    margin:0 20px; 
    position:relative; 
    padding:0; 
} 

#navi li a, .subnavi li a{ 
    color:white; 
    text-decoration:none; 
    display:block; 
    line-height:29px; 
    padding:10px 13px; 
    font-size:16px; 
    font-family:arial; 
    text-shadow: 0px 2px 2px #034e9f; 
    filter: dropshadow(color=#034e9f, offx=0, offy=2); 
} 

#navi > li:hover > a, #navi li a.active{ 
    background-color:#009; 
    height:30px; 
    line-height:29px; 
    display:block; 
}

來源

2013-04-23 01:16:28 Arbel

感謝您的建議。它工作。但是，當我在它下面添加一個div時，它會在我的導航欄和我要放置照片旋轉器的div盒之間留下一個小間隙。爲什麼會發生這種情況？以下是正在進行的截圖的鏈接：https://www.dropbox.com/s/9twyb86zs43vsai/web%20screenshot.JPG – DWalk 2013-04-23 05:10:11

歡迎您。造成這種差距的原因可能有很多，代碼的結構，填充，邊距，定位和顯示類型等等。您可以提出另一個問題並提供代碼，以便我們爲您提供適當的幫助。但是，如果我的答案解決了您當前的問題，請將其標記爲將來參考的答案。 – Arbel 2013-04-23 06:32:27

謝謝你。我將嘗試自己解決差距問題。謝謝你的幫助。 – DWalk 2013-04-23 20:34:46

Working Fiddle

從導航a標記中刪除height: 50px;標記。這是選項1.另一種選擇是增加您的nav欄的高度。問題是，通過賦予錨點與導航欄高度相同的高度，它會在邊距和填充之後過大。

您的代碼應該是這樣的：

#navi > li:hover > a, #navi li a.active{ 
    background-color:#009; 
    line-height:29px; 
    display:block;   
}

來源

2013-04-23 01:11:18

你需要改變你的a:active元素的高度29px匹配所有其它子a元素#navi的行高，或只是將其刪除乾脆：

#navi > li:hover > a, #navi li a.active{ 
    background-color:#009; 
    height:29px; 
    line-height:29px; 
    display:block; 
}

我已經更新您的jsfiddle：

http://jsfiddle.net/3qPbE/64/

來源

2013-04-23 01:11:51 adaam

謝謝，但我想知道如何獲得活動狀態和懸停狀態與導航欄相同的高度？我做了導航欄50像素，但我需要懸停和活動狀態是相同的大小？ – DWalk 2013-04-23 02:14:02

我該如何修復我的導航菜單條

回答

Working Fiddle

相關問題