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