0

これが私のCSSです

.arrow_l, .arrow_r {
    -moz-transition: opacity 0.5s ease 0s;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #aeaeae;
    height: 60px;
    margin-top: 80px;
    position: absolute;
    width: 36px;
    opacity:.75;
}
.arrow_l {
    background: url("../images/arrow.png") no-repeat 10px center,red;
    background-size: 116% auto;
}
 .arrow_r {
    background: url("../images/arrow.png") no-repeat -15px center,red;
    background-size: 116% auto;
    margin-left:-36px;

}

ここに画像の説明を入力してください

コンテンツはcssのラッパー内にあります：

.wrapper {
    display: inline-block;
    padding: 12px;
}

右矢印が下の行に表示される理由と、それを修正するにはどうすればよいかわかりません。

4

1 に答える 1

0

JsFiddleは問題を再現しませんが、コードとここに投稿した情報を見て、いくつか試してみることをお勧めします。

  1. まず、絶対ポジショニングは、親divのポジショニングが相対に設定されている場合にのみ適切に機能します。これはないので、親div（パネルと呼ばれていると思います）をposition：relativeに設定してみてください。

  2. 矢印を絶対位置のアイテムとして宣言しましたが、実際には配置していません...次のようなものを試してください

    .arrow_l {
    background: url("../images/arrow.png") no-repeat 10px center,red;
    background-size: 116% auto;
    left:0px;
    top:25px;
}
 .arrow_r {
    background: url("../images/arrow.png") no-repeat -15px center,red;
    background-size: 116% auto;
    margin-left:-36px;
    right:0px;
    top:25px;
}

  3. 使ってみてください

    <div class="arrow_l"></div>

それ以外の

<span class="arrow_l"></span>

なぜあなたがこれをしたのか分かりませんが、特別な理由がありますか？

お役に立てれば ：）

于 2012-10-28T09:51:36.230 に答える