0

左右にフロートさせたい 2 つの矢印ナビゲーション アイテムがあり、それらは絶対に配置され、ページ上のすべてのものよりも高い z-index を持っています。しかし、私は問題を抱えています。

<div id="slider-nav">
<a href="#" id="next"></a>
<a href="#" id="prev"></a>
</div>

次に、2 つの項目を左または右にフロートさせたい CSS があります。

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    float: right;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    float: left;
}

#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}

何が起こるかというと、右に浮くべきブロックが、左の浮いているブロックの上に左に浮いてしまうということです。浮動要素の後とコンテナ div の内側に明確な修正を追加しようとしましたが、役に立ちませんでした。

4

7 に答える 7

3

要素は、フロー内にある場合にのみフロートできます。絶対配置要素はフローにないため、フロートできません。代わりにleft&ポジショニングを使用してみてください。right

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0;
}
于 2013-08-20T16:43:15.023 に答える
1

これは、配置または左右の属性によっていくつかの方法で修正できます。CSS コードで、位置を絶対ではなく相対に変更します。これで問題が解決するはずです。インラインブロックの横の表示も変更しました。 

#next {
        display:inline-block;
        width: 8px;
        height: 12px;
        background-image:url(images/next.png);
        z-index: 999;
        position: relative;
        float: right;
    }
    #prev {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/prev.png);
        z-index: 999;
        position: relative;
        float: left;
    }
               #slider-nav {
                border:1px solid red;
                    height: 12px;
                    width:100%;
                    position: absolute;
                    z-index: 100;
                }
于 2013-08-20T17:01:52.103 に答える
1

left:0px と right:0px の css パラメータで設定します

そして、80px http://jsfiddle.net/Hfc5r/3/のようなまともな幅を入れてください

#next {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0px;
}
#prev {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0px;
}
#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}
于 2013-08-20T16:41:18.387 に答える
0

要素を絶対配置したら、要素をフロートする必要はありません。

  #next {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/next.png);
            z-index: 999;
            position: absolute;
            right: 0;
        }
        #prev {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/prev.png);
            z-index: 999;
            position: absolute;
            left: 0;
        }
于 2013-08-20T16:42:47.543 に答える