CSS菜单问题

我的CSS菜单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; 
    }

菜单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>

预览 sample

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

什么是造成这个空间，它如何被删除。

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

来源

2010-10-25 booota

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

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

*例如：

此源代码：

this 
is 
text

给出了这样的输出：

这是文本

（换行符/空格被转换为1个空间之间单词（和李氏在你的情况下是“单词”））

来源

2010-10-25 10:42:31 oezi

总是被忽视但重要的是要注意。谢谢 – booota 2010-10-25 11:19:34

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

来源

2010-10-25 10:30:45

我使用的悬停图像创建问题，如果我删除填充底部：悬停8px。 – booota 2010-10-25 10:35:52

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

来源

2010-10-25 10:33:45

已经完成了这个技巧，但却造成了另一个问题。我用文字对齐：中心;以锚点为中心。现在看起来是左对齐的。 – booota 2010-10-25 10:37:46

一切看起来都不错，你用我们在这里的代码... – 2010-10-25 10:42:57

我在想这可能是浏览器默认的样式来应用一个边缘的李左/右。尝试将边距设置为0.

来源

2010-10-25 10:36:07 Alex

回答

相关问题