html - text-align が正しい場合の背景色

Question

私はこのhtmlを持っています:

<div>
    <p class="highlight-date">2009-4-5</p>
</dvi>

そしてここにcssがあります：

div{
    width: 200px;
}

div p{
    text-align: right;
}

.highlight-date{
    background-color: yellow;
}​

背景色をテキストのすぐ下にしたいのですが、今では div の左側から拡張されます。どうすればこれを修正できますか? ありがとう

フィドル: http://jsfiddle.net/f6exa/

</p>

Answer 1

これを修正する方法は次のとおりです。 http://jsfiddle.net/f6exa/1/

div {
    width: 200px;
    text-align: right;
}

.highlight-date{
    background-color: yellow;
    display: inline-block;
}​

変更点:

1. text-align: rightをコンテンツ (p) からコンテナー (div) に移動します。
2. コンテンツを作成します (p) display: inline-block。

Answer 2

 <div>
    <span class="highlight-date">2009-4-5</span>
</div>
<style type="text/css">
    div
    {
        width: 200px;
        text-align: right;
    }
    .highlight-date
    {
        background-color: yellow;
    }
    ​&lt;/style>

Answer 3

<div>
    <p>
        <span class="highlight-date">2009-4-5</span></p>
</dvi>