表示：テーブルとテキストが正しく動作しない

私はこれのような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-fieldにtable-optionを含めると、テキストが左詰めであることです。これを削除すると、期待どおりに動作します。このための回避策はありますか、またはdisplay：inlineタグと<br />タグを使用する必要がありますか？

出典

2011-10-14 OptimusCrime

フィドル：table要素は、デフォルトで全幅に伸びていないため、http://jsfiddle.net/xbNCZ/

、を "表+ text-align:rightは動作しません"。所望の結果を得るためにwidth:100%を加える。

Before/After設定width:100%。

出典

2011-10-14 10:00:39

テキストアライメントを機能させるには、要素に幅を設定する必要がありますが、幅があれば100％である必要はありません。 –

@ Jan-Henkより小さい幅では、望ましい結果が得られません。 OPは通常の 'div'要素の大きさ、' 100％ 'と等しい幅を要求しました。 –

このコメントは、text-alignプロパティが機能しなかった理由を説明するためのサイドノートとして追加されました。これは、幅が設定されていなかったためです。あなたは、OPが100％の幅を必要とすることは間違いありません。 –

表示：テーブルとテキストが正しく動作しない

答えて

関連する問題