Question

我正在调整水平列表中的间距，似乎我有一个空白的第一个条目生成一个分隔符（border-right）。增加和减少填充，扩展和缩小列表中的第一个虚拟条目。

此页面上的导航栏http://compuball.com/GW2/guides/ranger/pages/pet_basics_101.html

在菜单项的右侧创建了间隔条......第一个间隔条跟随一个不应该存在的项目。

css：

NAV {
    width: 940px;
    float: left;
    font-family: Geneva,Arial;
    border: 6px outset #A96505;
    background-color: #F4CB90;
}

NAV ul {
    margin: 0px auto;
    padding: 0px;
    list-style-type: none;
}

NAV li {
    display: inline;
}

NAV li a {
    text-align: center;
    border-right: 2px groove #C6995F;
    font-size: 1.6em; 
    padding: 2px 10px;
    color: #A96505;
    text-decoration: none;
}

NAV li a.last {
    border-right: none;
}

NAV li a:hover {
    color: #6D3F02;
}

HTML：

    <NAV>
        <UL>
            <LI><a href="#top">Home</a></LI>
            <LI><a href="#Intro">Introduction</a></LI>
            <LI><a href="#Charming">Acquiring Pets</a></LI>
            <LI><a href="#Classification">Classification</a></LI>
            <LI><a href="#Control">Control Panel</a></LI>
            <LI><a Class="last" href="#Management">Management Panel</a></LI>
        </UL>
    </NAV>

Answer 1

你的问题是：

<HEAD>
  <A ID = "top" />
</HEAD>

您要做的是将其移出文档的<head>，然后在<body>标记后移动它。另外，鉴于下面的优秀评论，我们应该让它看起来像这样，因为<a>标签不是自我关闭的：

<a id="top"></a>

Answer 2

好的，这里有一个明确的问题 - 在FireBug中查看时，在你进入Wrapper部分之前，你有四个实例<a id="top">。其中一个是在导航列表中，创建一个元素（然后填充等）。

我猜你想要一个内部链接，让用户无需滚动即可到达页面顶部。这涉及页面顶部（不在您的导航列表中）的一个目标引用，如下所示：<a name="top"></a>以及您需要的页面下方的相应链接，如下所示：{{ 1}}。这将使屏幕顶部返回到目标引用所在页面上的点。

因此。清除<a href="#top">Back to Top<a>的所有内容并将其替换为页面顶部的一个适当的目标引用（例如，在打开<a id="top"></a>标记之后），您应该没问题。

Answer 3

你的第一个li实际上有两个标签，其中一个不确定它是如何出现的，因为它在你查看源时没有显示但它就在那里。在Chrome中右键单击主页链接，然后选择您将在其中列出的检查元素。

您是手动输入此HTML还是为您生成的？

在页面顶部附近，您有：

 <A ID = "top" />

标签不是自动关闭的，所以发生的事情是标签在找到菜单中的第一个标签之前没有关闭，在菜单中创建了一个额外的元素。

<a id="top"></a>

将使用额外的菜单项

解决您的问题

通过以下网址运行您的页面：http://validator.w3.org以查找其他错误（您的错误很少！干得好！）

幻影首次进入水平列表

3 个答案: