Question

即使我的#tbr div 对齐设置为正确，精灵也会保持左对齐。有什么想法吗？

普通文字，链接和图片都可以正常使用。（与右边对齐，右边距为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/

Answer 1

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

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

Answer 2

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

以下是修复方法：

位置：相对;在#tbr并停止再次错误定位我设置了宽度：auto;也就是这样。

Answer 3

See this

这是你想要的吗？

Answer 4

只需将浮动：正确给 #bar a ，就像这样： -

#bar a {

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

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

精灵右对齐

4 个答案: