Question

我已经准备好完成这个网站了，但我还是坚持了几件事情，其中一件让我完全难过。我正在使用Dreamweaver CS6，但我对Adobe软件一般都很糟糕（不是常规的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;
}

Answer 2

从#nav1 li移除填充似乎为我解决了这个问题。

<强> jsFiddle example

Answer 3

我对您的代码进行了一些更改。

首先，我将<li>元素设置为显示inline-block，而不是显示inline以将块样式应用于最外层元素。其次，我将16.5%宽度设置为<li>元素，并使<a>元素的宽度为100％。

请注意，这也是导航栏的中心。

Working JSFiddle

Answer 4

#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;    
margin-top: 2%;
text-align: center;
word-spacing: normal;
   }
  #nav1 ul{
height: 30px;
   }
  #nav1 li{
display: inline;
   }
  #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;
background-color: rgb(170,0,0);
   }
  #nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
   }
  #nav1 li a#visited {
background-color: rgb(170,0,0);
   }

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

4 个答案:

Working JSFiddle