精灵右对齐答案

【问题标题】：Sprite right align精灵右对齐
【发布时间】：2012-05-21 09:58:17
【问题描述】：

即使我的#tbr div align 设置为 right，精灵仍保持向左对齐。任何想法为什么？

普通文本、链接和图片都可以正常工作。（向右对齐，右边距为 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/

【问题讨论】：

标签： html css

【解决方案1】：

不确定我是否完全关注你，但我认为这可能是你的问题

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

【讨论】：

哦，当然，多么愚蠢的错误。我什至没有注意到它。谢谢:)

【解决方案2】：

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

修复方法如下：

位置：相对；在#tbr 上并阻止它再次被错误定位，我设置了宽度：自动；也在上面。

【讨论】：

问题只是我的代码中#bar a 上的一个浮点数：左。感谢您找到解决方法。 :)
啊，是的，完全没有注意到:)

【解决方案3】：

像这样#bar a给你float:right：-

#bar a {

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

我希望这会对你有所帮助.... 看演示：-http://jsfiddle.net/B4n9T/5/

【讨论】：

【解决方案4】：

See this

这是你想要的吗？

【讨论】：