2

スプライトシートがあり、画像を並べて表示したいのですが、コードは最終的な画像しか表示していません。したがって、このコードはgoogle画像のみを表示しますが、（a：hoverを使用して）正しく表示しますが、facebookまたはtwitter画像は表示しません。

座標が正しいことはわかってい<li>ます。ページを更新するときにグーグルをコメントアウトすると、Facebookの画像のみが表示されます。何が悪いのかわかりませんが、displayプロパティと関係があるのでしょうか？

編集：これが起こっていることの実例です：http： //jsfiddle.net/Duykb/

<div class="social"><h3>SHARE THIS PAGE</h3>
     <ul id="social">
         <li class="facebook">
             <a href="#" title="Facebook"></a></li>
         <li class="twitter">
             <a href="#" title="Twitter"></a></li>
         <li class="google">
             <a href="#" title="Google+"></a></li> 
    </ul>
 </div>

CSS：

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; }

#social {
margin-top: 10px;   
display: block;
position:relative;
padding-top: 30px; }        

#social li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0; }

#social li, #social a {
height:37px;
display:block; }


ul#social li.facebook a {
background: url('images/social_icons.png') no-repeat -5px -4px;
width: 37px;
height: 37px; }

ul#social li.facebook a:hover {
background: url('images/social_icons.png') no-repeat -5px -42px;
width: 37px;
height: 37px; }

ul#social li.twitter a {
background: url('images/social_icons.png') no-repeat -45px -4px;
width: 37px;
height: 37px; }

ul#social li.twitter a:hover {
background: url('images/social_icons.png') no-repeat -45px -42px;
width: 37px;
height: 37px; }

ul#social li.google a {
background: url('images/social_icons.png') no-repeat -82px -4px;
width: 37px;
height: 37px; }

ul#social li.google a:hover {
background: url('images/social_icons.png') no-repeat -82px -42px;
width: 37px;
height: 37px; }
4

2 に答える 2

1

<li>絶対的な位置にあるため、あなたのはすべて互いに重なり合っていると思います。したがって、あなたは階層化の問題に取り組んでいます。

それらをすべて隣り合わせに配置する場合は、各ブロック要素に幅を設定し、left:またはright:プロパティを使用して絶対位置を指定してみてください。

編集：

#social liルールを...に変更します

    #social li {
    margin:0;
    padding:0;
    list-style:none;
    width: 37px;
    float:left;
}

http://jsfiddle.net/Duykb/2/

于 2012-06-11T23:21:34.867 に答える
0

http://jsfiddle.net/Duykb/1/

から削除position: absoluteし、次に追加しました...top: 0#social li

#social li {
    float: left;
    width: 37px;
}

#social次に、ページ上の適切な位置に必要な調整を行います。

于 2012-06-11T23:31:04.683 に答える