html - 显示 : table and text-align right not working

Question

我有一个像这样的 html 结构:

<div class="campain">
    <div class="campainText">
        <a href="#"><h2>Ny app til iPhone og iPad</h2></a>
        <a href="#"><h2>Tips og vinn</h2></a>
    </div>
    <div class="campainPicture">
        Picture goes here
    </div><div class="clear"></div>
</div>

我希望 campainText 右对齐。这个元素的 css 是这样的:

font-family: 'Spinnaker', sans-serif;
font-size: 17px;
color: #FFFFFF;
background-color: #A2AD00;
display: table;
padding: 4px;
margin: 4px 4px 4px 4px;
text-decoration: none;

我知道 CSS 的其余部分可以正常工作。问题是如果我在显示字段中包含表格选项，文本将左对齐。一旦我删除它，它就会按预期工作。是否有任何解决方法，或者我是否必须使用 display: inline 和 <br />标签？

Answer 1

fiddle :http://jsfiddle.net/xbNCZ/

“表格 + text-align:right 不起作用”，因为默认情况下表格元素不会拉伸(stretch)到全宽。添加 width:100% 以获得所需的结果。

Before/After设置 width:100%。