0

私は水平方向のナビゲーションにを使用しています。質問のおかげで：ナビゲーション用li + liのセパレーター、 （疑似？）セレクター を使用して画像ベースのアイテムセパレーターを設定する良い方法について読みました。

私のコードでは、<li>タグの背景画像を定義していますが、コードを追加するli + liと、区切り文字が表示されますがli、最初のタグの後のすべてのタグの背景が消えます。コードを削除すると、#nav-items li+liすべてのアイテムの背景が復元されます（ただし、セパレーターはありません）

（スクリーンショット） リストアイテムの背景が消える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; 
}

私は何が間違っているのですか？

4

1 に答える 1

1 
#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 */
}
于 2013-02-18T09:21:15.117 に答える