html - CSS Sprite 翻转显示垂直而不是水平

Question

我正在尝试为这个页面制作一个简单的翻转图像 - www.radioandweb.com。在我将其放入实际页面结构之前，我使用的 CSS Sprite 代码工作正常。然后它从水平变为垂直。我猜这是因为干扰了其他 CSS 属性。

有人可以建议一个简单的解决方法吗？有问题的图像位于右上角(facebook、twitter、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>

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

Answer 1

在你的 text.css 文件中你有

li {
    margin-left: 30px;
}

这与您的 sprite CSS 冲突。如果您只是更新您的“ul#socialnavigation li”以包含诸如“margin-left:auto”之类的内容，它应该会修复它。

欧肯娜根万岁! :)