0

次の結果を取得したい:

__ _ __ _ __ _ __ _ ___ _ページのタイトル

たとえば、html マークアップが<h1>Title of page</h1>で、h1 がwidth:100%andtext-align:rightに設定されているとします。タイトルの左側だけに下線を付けたいとします。

それを達成する方法の手がかりはありますか？タイトルを でラップし<div>、背景を白にして少し下に移動して、h1 ボックスの下部に重なるようにしましたが、これが 100% クロスブラウザーで機能するかどうかはわかりません。

4

4 に答える 4

2

代替ソリューション:

<div style="width:100%;float:left;border-bottom:1px solid">
 <h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>​

http://jsfiddle.net/VMCax/1/

于 2012-02-29T16:24:09.597 に答える
2

IE8+ でサポートされているため、行がコンテンツの表示に重要でない限り、これを試すことができます。

h1:before{content:"________________"}​

ここでjsfiddle

于 2012-02-29T16:21:37.303 に答える
1

あなたがやろうとしていることは、ラッパーコンテナと内部のフロートでよりよく達成されるように見えます. 内側の div (またはフローティング h1) の背景を白にします。外側の div に、テキスト div の行の高さと同じ間隔の繰り返し (repeat-y) 背景を持たせます。

ラッパー div が浮動 div を尊重していることを確認してください (overflow:hidden または float の末尾に明確な div を使用)。

これにより、探している効果が得られ、複数行のタイトルでも機能するはずです。

于 2012-02-29T16:22:03.033 に答える
1

私はCSSで生成されたコンテンツを使用し、改行なしのスペースと下線を付けます: http://jsfiddle.net/JMVUa/1/

h1:before{
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
    text-decoration: underline;
}​
于 2012-02-29T16:28:42.620 に答える