向右浮动是向左浮动？

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

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

Answer 1

如果元素在流中，则只能将它们浮动。 绝对定位的元素不在流程中，因此不能浮动。 尝试使用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 2

我会用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;
}

Answer 3

您可以通过定位或通过left / right属性来解决此问题。 在CSS代码中，将位置修改为相对而不是绝对。 这应该可以解决您的问题。 我还更改了inline-block旁边的显示。

#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 4

将元素放置在绝对位置后，无需浮动它们：

  #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 5

使用right:0; left:0; 用于绝对定位的元素

Answer 6

您不需要position: absolute; 在#prev和#next中，除非您希望它们相互堆叠。

Answer 7

我已经测试了您的代码，问题是这个position: absolute; 使它浮动在整个文档上。 您可能会考虑使用left: 10px类的东西，这将创建margin-left: 10px类的东西。 使用此代码：

    #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;
        right: 30px;
        float: left;
    }
               #slider-nav {
                    width: 100%;
                    height: 12px;
                    position: absolute;
                    z-index: 100;
                }

如果要将其向右浮动，可以使用以下命令： right: 10px这将使其仅在右侧浮动10px的边距。

编辑：我的代码使用的是right: 10px ，这意味着它将浮动在右侧。