雪碧右對齊

即使我#tbr格對齊設置爲權，精靈一直排列到左邊。任何想法爲什麼？雪碧右對齊

普通文本，鏈接和圖片工作正常。（右對齊，20px右邊距，就像它應該是）。

HTML：

<div id="topbar"> 
<div id="tbl">abc</div> 
<div id="tbc">center</div> 
<div id="tbr"> 
<div id="bar"> 
<a href="#" id="sound"></a> 
</div> 
</div> 
</div>

CSS：

#topbar { 

    width:100%; 
    height:36px; 
    padding-top:12px; 
    background-color:#e7e6e6; 
    border-top:1px solid #d0cdcd; 
    border-bottom:1px solid #d0cdcd; 


} 

#tbl {float:left; width: 30%; text-align:left; padding-left:20px;} 
#tbc {display:inline-block; text-align:center; width: 30%;} 
#tbr {float:right; width: 30%; text-align:right; padding-right:20px;} 

#bar {margin-top:-5px;} 

#bar a { 

    height:35px; 
    display:block; 
    background-image:url(http://goo.gl/yLbQ9); 
    float:left; 
} 

#sound {width:35px; background-position:0 0;}

的jsfiddle：http://jsfiddle.net/B4n9T/

來源

2012-05-21 John

不知道如果我在這裏跟隨你完全，但我認爲這可能是您的問題

#bar a { 
    height:35px; 
    display:block; 
    background-image:url(http://goo.gl/yLbQ9); 
    float:left; //you want this to be right 
}

來源

2012-05-21 10:05:11 evancohen

哦，當然，多麼愚蠢的錯誤。我甚至沒有注意到它。謝謝：） – John

http://jsfiddle.net/B4n9T/3/

下面是它是如何固定的：

的位置是：相對的;在#tbr上，並停止它被錯誤地定位，我已經設置了寬度：auto;也是。

來源

2012-05-21 10:02:29

的問題瓦特只是一個浮點數：在我的代碼中留在#bar a上。感謝您找到解決方法。 :) – John

啊是的，完全沒有注意到:) –

See this

這是你想要的嗎？

來源

2012-05-21 10:05:02 Rab

只要給浮動：權你#bar一個這樣的： -

#bar a { 

    height:35px; 
    display:block; 
    background-image:url(http://goo.gl/yLbQ9); 
    float:right; 
}

我希望這將幫助你.... 看到演示： - http://jsfiddle.net/B4n9T/5/

來源

2012-05-21 10:18:07

回答

相關問題