1

私の#tbrdiv 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/

4

4 に答える 4

2

ここであなたを完全にフォローしているかどうかはわかりませんが、これはあなたの問題かもしれません

#bar a {
    height:35px;
    display:block;
    background-image:url(http://goo.gl/yLbQ9);
    float:left; //you want this to be right
}
于 2012-05-21T10:05:11.253 に答える
1

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

修正方法は次のとおりです。

位置:相対; #tbr で、再び誤って配置されるのを防ぐために、 width:auto; を設定しました。それにも。

于 2012-05-21T10:02:29.277 に答える
1

これを見る

これはあなたが欲しかったものですか？

于 2012-05-21T10:05:02.577 に答える
1

float:rightを#bar に次のように与えるだけです:-

#bar a {

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

これがお役に立てば幸いです....デモをご覧ください：- http://jsfiddle.net/B4n9T/5/

于 2012-05-21T10:18:07.110 に答える