2

タイトル スパンの左右に 2 つの画像を含める方法を探しています。私が直面している問題は、このタイトルが場合によっては 2 行にまたがって表示されることですが、常にそうとは限りません。タイトルの前後または後に 2 つの余分な要素を含めたくありませんが、代わりに、コードに新しい要素を追加せずに、私が試みていることを達成する方法を探しています。そのため、:before と :after を使用することを望んでいました。これは私が思いついたものです：

.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; }

これはうまく機能しますが、タイトルが 1 行だけの場合、2 行を占めるタイトルはこのように動作しません。

タイトルが間違っている

:before および :after 疑似要素を希望どおりに動作させ、位置と表示を変更し、実際のテキストスパン位置を変更するなど、考えられるすべてを試しましたが、やりたいことを達成できませんでした。

2 つの画像を実際のテキスト スパンの横に配置したいので、単一の背景画像では機能しません。場合によっては、テキストと画像の間のスペースが大きすぎて、奇妙に見えます。これを機能させる方法はありますか?2 行のタイトルは次のようになります。

タイトル修正

ありがとうございました！

4

2 に答える 2

1

まあ、これは一般的な概念です。特定の回答を提供するには、完全なコードが必要です。

とにかく、このデモをチェックしてください

HTML:

<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>

CSS:

.block-title {
    position:relative;
    display:inline-block;
    text-align:center;
    padding:0 34px; /* width of your ornament + 6px per each side,
                        adjust to your actual layout */
}
.block-title:before, .block-title:after {
    content:" ";
    width:28px;
    height:14px;
    position:absolute;
    top:50%;
    margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
    background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
    left:0;
}
.block-title:after {
    background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
    right:0;
}
于 2012-10-08T09:22:41.517 に答える
0

スパンに適用すると、ルールは問題ありません。このコードを作成しました（画像を変更しました）http://jsfiddle.net/sSEDz/

于 2012-10-08T09:22:42.307 に答える