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

父容器不够宽，因此你的li不会向左浮动。

ul#socialnavigation{
    width: 200px;
}

Answer 2

在text.css文件中，您有

li {
    margin-left: 30px;
}

与你的精灵css冲突。如果您只是更新“ul＃socialnavigation li”以包含类似“margin-left：auto”的内容，则应该修复它。

奥卡诺根万岁！：）

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

2 个答案: