向右浮动是向左浮动吗？

Question

我有两个箭头导航项目，我想浮动左和右，他们是绝对定位的，有一个更高的z索引比页面上的一切。但我有个问题。

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

然后，我有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中添加清除补丁，但没有效果。

Answer 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;
                }

Answer 2

只有当元素在流中时才能被浮动。绝对定位的元素不在流中，因此不能浮动。尝试使用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;
}

Answer 3

我会用左侧:0px设置它，一个右:0pxcss参数。

然后放一个很好的宽度，就像80 put 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;
}