Question

这是我的HTML：

<nav id="menu">
   <ul>
      <li><a href="">Produkte</a></li>
      <li><a href="">Angebote</a></li>
      <li><a href="">Referenzen</a></li>
      <li><a href="">Anfahrt</a></li>
      <li><a href="">&Uuml;ber uns</a></li>
      <li><a href="">Jobs</a></li>
      <li><a href="">Partner</a></li>
      <li><a href="">Kontakt</a></li>
   </ul>
</nav>

这是我的CSS：

#menu {
    position:relative;
    width:100%;
    height:35px;
    margin-bottom:10px;
    background-image: url("../img/menuBackground.png");
    background-repeat: no-repeat;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    margin-right: 16px;
}

正如您可能会看到“menuBackground.png”中有白色条纹。（因此白色条纹是“menuBackground.png”图像的一部分。）问题是，菜单由CMS自动生成。 A元素中的文本永远不会与底层白色条纹重叠，与Kontakt元素一样。

当元素与白色条纹重叠时，我如何确保会有一些额外的间距？

预先感谢您对此

的任何回复

Screenshot browser

Original Image

这是一个JS FIDDLE EXAMPLE ......

Answer 1

以下作品：

#menu {
    position:relative;
    width:100%;
    margin-bottom:10px;
    background-repeat: no-repeat;
    overflow: hidden;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
    background-color: #ff9025;
    overflow: hidden;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    padding: 0 8px;
    height: 35px;
    background-color: #ffbf00;
}

#menu ul li:last-child {
    background-image: url(http://i.stack.imgur.com/WSJSV.png);
    background-position: 63% top;
    background-repeat: no-repeat;
    padding-right: 60px;
}

虽然，这有点像kludge。

JS Fiddle demo

有效地，我已从background-image（或ul，我现在不确定）中删除了nav，并将其添加到{{1}的末尾} ¹，定位它以便看到条纹。这包括为该元素添加足够的填充，并使用图像右侧的li:last-child样式化ul，并使用左侧颜色构造background-color元素以假装图片。它并不理想，但我认为它可靠。当然，我建议添加和评论出更多的li元素来测试它。

编辑在我发现IE几乎完全缺乏li支持后，使用jQuery（正如您所说，您的网站已在评论中使用它）：

:last-child

JS Fiddle demo

编辑到认为应该是最终版本，具有功能检测功能，可在没有$('#menu li:last').addClass('lastChild');支持的情况下启用jQuery选项（尽管如此）我还不能明确测试:last-child 本身不存在，但我怀疑一个不支持:last-child 的浏览器可能< / em>不支持document.querySelectorAll()，这实际上是一个可怕的假设）：

:last-child

JS Fiddle demo

这对于旧浏览器来说是一个问题，尤其是IE版本的浏览器，因为我记得7之前版本的if (!document.querySelectorAll){ $('#menu li:last').addClass('lastChild'); }伪选择器存在问题。在compatibility tables处查看Quirksmode.org时，它看起来比我想象的还要糟糕：没有低于IE9的版本支持:last-child选择器。

Answer 2

根据背景图像添加空间是不可能的，你有责任让它完全符合你想要的（做数学运算），你可以制作一个div来分割你的导航栏，但为此你必须切您的背景图片，1表示导航部分，其他表示白色条纹，或者只是较低的边距和字体大小

将CSS元素与底层元素相关联

2 个答案: