1

テキストが 2 行になるカスタムの下線を作成する方法を知っている人はいますか?

現在、私は以下を持っています：

<h1 class="title" id="page-title">Title goes here</h1>

h1 {
display: inline-block;
zoom: 1;
line-height: 1.4em;
background-image: url(../img/underline.png);
background-repeat: repeat-x;
background-position: left bottom;
}

問題は、行が長くなって折り返されると、下線が 1 つしか表示されないことです。

JSFiddleを参照してください

IE8に戻って動作するソリューションを探しています

4

1 に答える 1

0

コードで使用されるトリックは、x 方向に繰り返され、要素の下部に配置される背景画像を使用します。したがって、要素のブロックのようなレンダリング (インライン ブロックを含む) では、「下線」はブロックの下部にのみ表示されます。

複数行のコンテンツでこのトリックを機能させるには、要素をインライン要素にする必要があります。

h1 { display: inline; }

h1次に、要素をdivコンテナーにラップして垂直マージンを設定するなどの方法を使用して、改行と垂直スペースを作成する必要があります。

于 2013-05-21T12:59:03.140 に答える