0

我有这个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>

4

3 回答 3

4

以下是如何解决它:http: //jsfiddle.net/f6exa/1/

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

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

变化:

  1. 从内容 (p)移动text-align: right到容器 (div)。
  2. 制作内容 (p) display: inline-block
于 2012-09-01T05:12:36.737 回答
1
 <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>
于 2012-09-01T05:59:02.633 回答
0
<div>
    <p>
        <span class="highlight-date">2009-4-5</span></p>
</dvi>
于 2012-09-01T06:21:06.023 回答