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翻轉顯示垂直而不是水平

回答

相關問題