html - 文本对齐正确时的背景颜色

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 的左侧延伸。我该如何解决这个问题？谢谢

fiddle :http://jsfiddle.net/f6exa/

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。