代码之家 › 专栏 › 技术社区 › nageeb

使用li+li作为导航分隔符清除第一个项目后的<li>背景

css html

nageeb · 技术社区 · 12 年前

我使用的是用于水平导航,感谢以下问题: Separators For Navigation ,我读到了一个使用 li + li (伪?)选择器。

在我的代码中,我为 <li> 标签,但有一次我添加了 利+利 代码中,出现了分隔符,但所有的背景 li 第一个标签之后的标签已经消失。如果我移除 #nav-items li+li 代码,恢复所有项目的背景(但显然我没有分隔符)

(屏幕截图) list item background disappearing scereenshot

我的代码如下所示:

<ul id="nav-items">
  <li class="nav-item"><a href="#" title="Home">Home</a></li>
  <li class="nav-item"><a href="#" title="About Us">About Us</a></li>
  etc...
</ul>

和我的css:

#nav-items {
    list-style-type: none;
}

.nav-item {
    display: list-item; 
    float:left;
    width: 150px;
    height: 39px;
    background: url('../images/top-nav-bg.png');
    background-repeat: repeat-x;
    padding: 9px 20px;
    color: #fff;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

#nav-items li+li {
    background:url('../images/top-nav-separator.png') no-repeat top left; 
}

我做错了什么?

1 回复 | 直到 8 年前

Murali 12 年前

#nav-items li+li:before{
    background:url('../images/top-nav-separator.png') no-repeat top left; 
    content:"";
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:3px   /* your image width */
    height:57px   /* your image height */
}

推荐文章