css - 水平菜单中的最终列表项位于其余列表项下方

Question

我已经准备好完成这个网站，但我被困在几件事上，其中之一让我完全难住了。我正在使用 Dreamweaver CS6，但我对一般的 Adob​​e 软件感到很糟糕(不是普通的 Web 开发人员!)，所以我只是自己编写所有代码。我的页面顶部有一个水平运行的菜单栏。菜单中的最后一个链接在 Dreamweaver 预览中看起来不错，但是当我在浏览器中查看它时，最后一个菜单项位于其余菜单项的下方。我尝试输入图像，但这是我第一天访问该网站，所以我没有收集到足够的声誉点数。 :耸肩: 这是我的 div HTML 代码:

<div id="nav1">
<ul>
 <li><a href="Index.html" id="visited">Home</a></li>
 <li><a href="FAQ.html">FAQs</a></li>
 <li><a href="Rates.html">Rates</a></li>
 <li><a href="Contact.html">Contact Us</a></li>
 <li><a href="Portfolio.html">Portfolio</a></li>     
</ul>

这是 CSS。 (请原谅这些乱七八糟的东西；再一次，我只是一个没有太多经验的新手自由职业者。旁注:百分比是由于我正在创建一个响应式布局。)

  #nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;    
margin-top: 2%;
text-align: center;
word-spacing: normal;
   }
  #nav1 ul{
height: 30px;
padding: 8px 0px;
margin: 0px;
   }
  #nav1 li{
display: inline;
padding: 20px;
   }
  #nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
   }
  #nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
   }
  #nav1 li a#visited {
background-color: rgb(170,0,0);
   }

任何人都可以指出可能导致这种疯狂错位的错误吗？我真的希望我能张贴一张照片。该网站未上线，因此我也无法发布链接。但如果您发现代码有问题，也许就没有必要了。请帮忙!

更新:下面的答案已经解决了这个问题。感谢大家的快速解决方案。

Answer 1

#nav1 的最后 li 需要将其 padding-top 设置为 0px。尝试添加 style="padding-top: 0px"或做类似的事情。

#nav1 li:last-child {
    padding: 0px !important;
}