<a href> 链接到页面打印空间？

Question

我的Hyperlink Reference 正确链接到我的页面，但navigation bar 现在在文本前打印几个空格。我想我知道这是为什么，但我不知道如何解决这个问题。

我的 HTML：

            <li class="current_page_item"> <a href="#" accesskey="1" title=""> <a href="index.html"> Homepage </a> </li>
            <li> <a href="#" accesskey="4" title=""> <a href="resume/resume.doc"> R&egrave;sum&egrave; </a> </a> </li>

我的 CSS：

#menu{
    position: absolute;
    top: 2em;
    right: 0;
}

#menu ul{
    /* display: inline-block; */
    margin-left: -4px;
}

#menu li{
    display: block;
    float: left;
    text-align: center;
}

我认为我的问题在于 CSS。我注释掉了display: inline-block;，因为这是href 链接的默认空间。相反，我尝试取消 4 个空格，这就是我使用 -4px; 的原因。谁有想法？谢谢

Answer 1

将此代码添加到您的 css 文件中并删除 html 文件中给出的所有空格。

 li{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }

Answer 2

首先，删除<a> 标签之间的所有空格，因为这会添加空格。

我认为您可能遇到的问题是您的列表项之间有一些空间。如果您想将列表项保留在单独的行中，那很好，但要避免在关闭和打开 <li> 标记之间出现任何空白，如下所示；

<li><a ... </a></li><li>
<a ... </a></li><li>
<a ... </a></li>

这应该会缩小列表元素之间的差距。

希望这会有所帮助。