如何在div标签内更改文本对齐方式

时间:2014-08-04 01:44:49

标签: html css-tables

我不太确定这是否已在其他地方得到解答,但我在使用Adobe Dreamweaver CS6进行编码方面遇到了一些麻烦,我使用以下代码制作了一个spry可折叠面板:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
 <div class="CollapsiblePanelTab" tabindex="0">Bosses<span style="text-align=right"> Show</span></div>
   <div class="CollapsiblePanelContent"><div>Asylum Demon</div><!--Welcome to dark souls-->
   <div>Taurus Demon</div>
   <div>Belfry Gargoyles</div>
   <div>Capra Demon</div>
   <div>Gaping Dragon</div>
   <div>Chaos Witch Quelaag</div>
   <div>Iron Golem</div>
   <div>Crossbreed Pricilla</div><!--praise the fluffy tail-->
   <div>Ornstein & Smough</div>
   <div>Great Grey Wolf Sif</div><!--such boss, very sword, wow-->
   <div>Moonlight Butterfly</div><!--Dark Souls: Easy Mode-->
   <div>Seath the Scaleless</div><!--bury face in crotch and stab-->
   <div>The Four Kings</div><!--more like 3 kings-->
   <div>Ceaseless Discharge</div>
   <div>Demon Firesage</div>
   <div>Centipede Demon</div>
   <div>Bed of Chaos</div><!--SCREW THIS BOSS-->
   <div>Stray Demon</div>
   <div>Pinwheel</div>
   <div>Gravelord Nito</div>
   <div>Gwyn Lord of Cinder</div></div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

我的问题是;如何在不影响“老板”文本的情况下使< span style'text-align=right">Show< /span>位正确对齐?

1 个答案:

答案 0 :(得分:0)

<style>
    .CollapsiblePanelTab .left {
        float: left;
    }

    .CollapsiblePanelTab .right {
        float: right;
    }
</style>
<div class="CollapsiblePanelTab" tabindex="0">
    <span class="left">Bosses</span>
    <span class="right">Show</span>
</div>

http://jsfiddle.net/96up8/

甚至更短:

<style>
    .CollapsiblePanelTab .right {
        float: right;
    }
</style>
<div class="CollapsiblePanelTab" tabindex="0">
    Bosses <span class="right">Show</span>
</div>

http://jsfiddle.net/96up8/1/