0

下の境界線の上に表示しようとしている画像がありますが、下の境界線要素 (この例では「divider」という名前) の後ろに配置されており、正しく配置できません。

ボーダー要素の真ん中とその上に画像を表示したいと思います。垂直方向には、画像の左右にある 1px の線を 1px の境界線に合わせて、1 つの要素であるかのように表示しようとしています。

コードは次のとおりです。

.divider {
border-bottom: 1px solid #c3c3c3;
clear: both;
display: block;
margin-bottom: 20px;
padding-top: 20px;
width: 100%;
}

.sidearrow {
background: url(http://s16.postimage.org/sbf7v9n75/sidearrow.png) 50% 14px no-repeat;
width: 100%;
height: 25px;
}​    

<p>Here is some content above</p>

<div class="sidearrow"></div>
<div class="divider"></div>

<p>Here is some content below</p>​

そして、jsfiddle: http://jsfiddle.net/F5xjx/2/

これを機能させる方法はありますか？前もって感謝します。

4

2 に答える 2

0

これがあなたが求めているものであるかどうかはわかりませんが、パディングは必要ありません。

http://jsbin.com/ibaveg/1/

于 2012-09-05T09:44:36.277 に答える
0

あなたが何を望んでいるのか完全にはわかりませんが、これはあなたが目指している効果ですか？

.divider {
    border-bottom: 1px solid #c3c3c3;
    clear: both;
    display: block;
    margin-bottom: 20px;
    padding-top: 20px;
    width: 100%;
}

.sidearrow {
    background: url("http://s16.postimage.org/sbf7v9n75/sidearrow.png") no-repeat scroll center top transparent;
    width: 100%;
    height: 25px;
}

http://jsfiddle.net/nottrobin/gbrcB/1/

于 2012-09-05T09:43:58.967 に答える