显示：表格和文字右对齐不起作用

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 />标记？

- OptimusCrime

Answer 1

Fiddle: http://jsfiddle.net/xbNCZ/

"表格+text-align:right不起作用"，因为表格元素默认情况下不会拉伸到整个宽度。添加width:100%可以获得所需的效果。

在设置width:100%之前 / 设置width:100%之后。

- Rob W

---

为了让text-align起作用，您应该在元素上设置一个宽度，但任何宽度都可以，不一定非要是100%。 - Jan-Henk

较小的宽度不会产生所需的结果。OP请求一个等于普通“div”元素大小的宽度，即“100%”。 - Rob W

我只是添加了这个注释作为一个旁注，以解释为什么text-align属性没有起作用，那是因为没有设置宽度。你说得对，原帖需要设置100%的宽度。 - Jan-Henk

你的fiddle是否应该显示解决方案？因为在你的fiddle中左对齐文本无法正常工作。 - johny why