1

ちょっと説明が難しいので、もっといいタイトルを知っている人がいたら、どんどん変えてください。

見出しの後ろに黒いボックスを描きたいです。hタグ内のスパンでこれを行っています。左右に少しパディングが必要です。私のレイアウトはレスポンシブなので、見出しが 2 行に分かれている可能性があります。

    <div class="headline-black">
        <h1 class="entry-title">
             <span>Some very, very long headline, that is very, very long.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

問題: パディングは、スパンの最後と最初にのみ影響します。見出しが壊れている場合、文字はボックスの境界に触れています。

これが理解できることを願っています。これがフィドルです。ウィンドウを小さくして、動作を確認してください。

http://jsfiddle.net/832u8/2/

編集：テキストのような形にしたい。フェルトチップで印を付けるように。ただし、すべての行にパディングがあります。

4

5 に答える 5

0

最近、別の解決策を見つけました。ほぼすべてのブラウザー (IE8 以下) で動作し、簡単に調整でき、次のようになります。

HTML

<h1>
    <span class="wrap">
        <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}
于 2014-03-26T12:41:24.770 に答える