html - 向右浮动就是向左浮动？

Question

我有两个箭头导航项，我想左右浮动，它们是绝对定位的，并且具有比页面上所有内容都高的 z-index。但我遇到了一个问题。

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

发生的事情是应该向右浮动的 block 最终向左浮动在左侧 float block 的顶部。我尝试在 float 元素之后和容器 div 内添加清除修复，但无济于事。

Answer 1

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