0

..を使用すると奇妙な問題が発生しbackground-positionます。単に機能していません。

これが私のコードです:

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li><a href="#" id="facebook-img"></a></li>
        <li><a href="#" id="twitter-img"></a></li>
        <li><a href="#" id="googlplus-img"></a></li>
        <li><a href="#" id="linkedin-img"></a></li>
        <li><a href="#" id="youtube-img"></a></li>
        <li><a href="#" id="rss-img"></a></li>
    </ul>
</div>

#follow-wrapper ul li {
    display: inline-block;    
    margin-left:8px;    
    width: 16px;
    height: 16px;
    background-image: url('../img/follow.png');
    background-repeat: no-repeat;
}

#facebook-img{
    background-position: 0px 0px;
}

#twitter-img {
    background-position: 0px -26px;
}

#googleplus-img{
    background-position: 0px -52px;
}

#linkedin-img{
    background-position: 0px -78px;
}

#youtube-img{
    background-position: 0px -104px;
}

#rss-img{
    background-position: 0px -130px;
}

結果は次のとおりです。 ここに画像の説明を入力

4

2 に答える 2

1

liアンカーの代わりにタグにID を付けます。現在、タグは、liなどの必要なスタイリングの一部を受け取ります。アンカー タグは、スタイリングの他の部分である背景の配置を受け取ります。これらのスタイルはすべて に適用する必要があります。widthbackground-imageli

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li id="facebook-img"><a href="#" ></a></li>
        <li id="twitter-img"><a href="#" ></a></li>
        <li id="googlplus-img"><a href="#"></a></li>
        <li id="linkedin-img"><a href="#"></a></li>
        <li id="youtube-img"><a href="#"></a></li>
        <li id="rss-img"><a href="#"></a></li>
    </ul>
</div>
于 2013-02-10T21:46:21.790 に答える
0

リンクには<a>背景がありません。<li>ID を要素に移動する必要があります。現時点では、CSS で適切な要素をターゲットにしていません。

IE

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li id="facebook-img"><a href="#"></a></li>
        <li id="twitter-img"><a href="#"></a></li>
        <li id="googlplus-img"><a href="#"></a></li>
        <li id="linkedin-img"><a href="#"></a></li>
        <li id="youtube-img"><a href="#"></a></li>
        <li id="rss-img"><a href="#"></a></li>
    </ul>
</div>
于 2013-02-10T21:46:03.360 に答える