2

我有一个精灵表，我想将图像并排显示，但代码只显示最终图像。因此，此代码仅显示 google 图像，但它确实正确显示它（使用 a:hover），但它不显示 facebook 或 twitter 图像。

我知道坐标是正确的，如果我<li>在刷新页面时注释掉谷歌，只会显示 facebook 图片。我不知道它有什么问题，但想知道它是否与显示属性有关？

编辑：这是正在发生的事情的一个活生生的例子：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:orright:属性为它们提供绝对位置。

编辑：

将规则更改#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 回答