CSS菜單導航搞砸

Question

我在更新標題導航菜單這裏顯示一個網站的過程是：

正如你所看到的，文本&隔板被下推和菜單看起來關閉。我已經嘗試了幾個不同的東西無濟於事。我想讓文字&垂直對齊，而沒有額外的填充在頂部。

CSS

/*Header Link Wrap & Align*/ 

#nav-wrap { 
    width: 100%; 
    overflow: hidden; 
    height: 52px; 
    background-image: url(/nd/images/hlink-bg.jpg); 
    background-repeat: repeat-x; 

} 


#nav { 
    text-align: center; 

} 

#nav li { 
    list-style: none; 
    display: inline-block; 
    vertical-align: middle; 
    padding: 0px 10px 0px 0px; 
} 

#nav a { 
    color: #FFFFFF; 
    display: inline-block; 
    font-family:arial; 
    margin: 0; 
    padding: 9px 18px 9px 18px; 
    text-decoration: none; 
    vertical-align: middle; 
} 

#nav a:hover { 
    background-color: #ffa500; 
    color: #fff9; 
} 




.head-divider { 
    list-style: none; 
    vertical-align: middle; 
    display: inline-block; 
    margin: 0; 
    width:2px; 
    height:52px; 
    background-image:url(/nd/images/h-divider.jpg); 
    background-repeat: no-repeat; 

} 

HTML

<div id="nav-wrap"> 
    <ul id="nav"> 
    <li><a href="homes.php">Custom Homes</a></li> 
    <li class="head-divider"></li> 
    <li><a href="inspections.php">Inspection Services</a></li> 
    <li class="head-divider"></li> 
    <li><a href="energy.php">Energy Audits</a></li> 
    <li class="head-divider"></li> 
    <li><a href="contact.php">Contact</a></li> 
    </ul> 
</div> 
</div> 

你的幫助是非常讚賞。

Answer 1

您可以簡單地重設<ul>的margin和padding。

添加下面的樣式給你#nav：

#nav{ 
    margin:0px; 
    padding:0px; 
}