4

divの幅が固定されているため、1行以上のdivにH1があります。背景色をH1テキストのみに設定して、背景がテキストの後ろにのみ残るようにします（たとえば、行の終わりに空のスペースがある場合は、そこで背景色を使用しないでください）。

また、テキストの左右のパディングを設定する必要があります。見出しにパディングを設定しようとしましたが、機能しません。

これが私が取得しようとしているものです：

ここに画像の説明を入力してください

H1の表示を設定し、背景色を設定してこれを実現しようとしていinlineますが、うまくいかないようです。以下は私の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 に答える