CSS菜单问题

Question

我的css菜单

     ul#menubar {
     width: 800px;
     padding: 27px 10px 5px 10px;
     list-style: none;
     text-align: center;
     }

    ul#menubar li {
 display: inline;
    }
    ul#menubar li a{
 border-right: 1px solid #111111;
 font: 12px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 padding: 5px 10px 8px 10px;
    }

    ul#menubar li a#last {
 border-right: none;
    }

    ul#menubar li a:hover, ul#menubar li a:active{
 background: #8d4d09 url("images/hover.gif") bottom center no-repeat;
 padding-bottom: 8px;
    }

menu html

    <ul id="menubar">
        <li><a href="#" target="_self">Home</a></li>
        <li><a href="#" target="_self">Sale</a></li>
        <li><a href="#" target="_self">Purchase</a></li>
        <li><a href="#" target="_self">Rent</a></li>
        <li><a href="#" target="_self">Developments</a></li>
        <li><a href="#" target="_self">Interior Decorators</a></li>
        <li><a href="#" target="_self">Maps</a></li>
        <li><a id="last" href="#" target="_self">Legal Documents</a></li>
    </ul>

预览

问题是，当链接悬停时，我无法弄清出右边界和锚点之间的空间。

导致此空间的原因以及如何将其删除。

悬停效果显示在“购买”链接上。

Answer 1

问题是display: inline; - 在源代码中，你的li之间有换行符，它们代表网站上的空格（当你使用内联元素和/或文本时，alwys，见下面的示例）。

要避免这种情况，请使用float: left;或在一行中定义ul / li，不要在它们之间使用空格/换行符。

*示例：

此源代码：

this
is
text

给出了这个输出：

  

这是文字

（换行/空格在单词之间转换为1个空格（在你的情况下，li是“单词”））

Answer 2

ul#menubar li {
 display: inline;
 float: left;
}

Answer 3

您在悬停时设置padding-bottom: 8px，您已经padding: 5px 10px 8px 10px;  适用于元素。您是否还需要在悬停时设置填充权限，因为仍然会应用10px？

Answer 4

我认为在li的左/右应用边距可能是浏览器默认样式。尝试将边距设置为0。