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

首先，删除<a>标记之间的任何空格，因为这会添加空格。

我认为您可能遇到的问题是列表项之间有一些空格。如果您希望将列表项保持在单独的行中，那么这很好，但避免在结束和打开<li>标记之间留出任何空白，如下所示;

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

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

希望这有帮助。

Answer 2

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

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

<a href=""> link to page prints space?</a>

2 个答案: