4

由于 div 的宽度固定，我在 div 中有一个 H1，它位于多于 1 行。我只想将背景颜色设置为 H1 文本，以便背景仅保留在文本后面（例如，如果行尾有空格，则不应在此处使用背景颜色）。

另外，我需要设置文本的左右填充。我试图将填充设置为标题，但它也不起作用。

这是我想要得到的：

在此处输入图像描述

我试图通过设置inlineH1 的显示和设置背景颜色来实现这一点，但它似乎不起作用。以下是我的 HTML 和 CSS 以及演示。

HTML：

<div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa felis, at aliquam libero. </h1>

CSS： 

.box{
    background: green;
    overflow: hidden;
    max-width: 100px;
    margin: 50px auto;
    padding: 20px;
}

h1{   
    background: yellow;
    font-size: 30px;   
    float: left;
    display: inline;   
}

演示：http: //jsfiddle.net/BQMXa/

4

2 回答 2

7

删除 float:left您的h1

演示

于 2012-12-11T09:48:53.670 回答
1

float: left没有必要。去掉它。

此外，您可能想要减少line-height它，使其看起来像演示（如果您不这样做，您将在文本下方有空行，这可能是不可取的）。

于 2012-12-11T09:49:38.210 回答