CSS sprite翻转显示垂直而不是水平

我想为这个页面做一个简单的翻转图像 - www.radioandweb.com。我使用的CSS Sprite代码正常工作，直到我将它放入实际的页面结构中。然后它从水平变为垂直。我猜这是因为干扰其他CSS属性。CSS sprite翻转显示垂直而不是水平

有人可以为此提出一个简单的解决办法吗？有问题的图片位于右上角（脸书，推特，linkedin）。这里是CSS代码：

ul#socialnavigation { 
    width:109px; 
    height:34px; 
    margin-left:auto; 
    margin-right:auto; 
} 
ul#socialnavigation li { 
    position:relative; 
    float:left; 
    text-indent:-9999px;  
    list-style-type:none; 
} 
ul#socialnavigation li a { 
    border:0; 
    display:block; 
    text-decoration:none; 
    background:transparent url('http://www.radioandweb.com/wp-content/themes/u-design/styles/style1/images/socialnetworkrollovers.png') no-repeat; 
} 
li#facebook a { 
    width:36px; 
    height:34px; 
} 
li#twitter a { 
    width:37px; 
    height:34px; 
} 
li#linkedin a { 
    width:36px; 
    height:34px; 
}  
li#facebook a:hover, li#facebook a:focus { 
    background-position:0px -34px; 
} 
li#twitter a:link, li#twitter a:visited { 
    background-position:-36px 0px; 
} 
li#twitter a:hover, li#twitter a:focus {  
    background-position:-36px -34px; 
} 
li#linkedin a:link, li#linkedin a:visited { 
    background-position: -73px 0px; 
} 
li#linkedin a:hover, li#linkedin a:focus { 
    background-position: -73px -34px; 
}

这里是HTML代码：

<ul id="socialnavigation"> 
    <li id="facebook"><a href="http://www.facebook.com" title="Facebook">Facebook</a></li> 
    <li id="twitter"><a href="http://www.twitter.com" title="Twitter">Twitter</a></li> 
    <li id="linkedin"><a href="http://www.linkedin.com" title="Linkedin">Linked In</a></li></ul>

感谢，任何帮助非常感谢！

来源

2011-08-29 Kevin

在你text.css文件你有

li { 
    margin-left: 30px; 
}

这与你的精灵的CSS冲突。如果你只是更新你的“ul＃socialnavigation li”来包含诸如“margin-left：auto”之类的东西，它应该修复它。

okanagan万岁！ :)

来源

2011-08-29 22:32:37 CraigW

父容器不够宽，因此你的li不会左移。

ul#socialnavigation{ 
    width: 200px; 
}

来源

2011-08-29 22:31:53 Chad

CSS sprite翻转显示垂直而不是水平

回答

相关问题