向右浮动是向左浮动？

Posted 2023-02-23

【中文标题】向右浮动是向左浮动？

【英文标题】：Float right is floating left?

【发布时间】：2013-08-20 16:39:04

【问题描述】：

我有两个箭头导航项，我想左右浮动，它们绝对定位并且比页面上的所有内容都具有更高的 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 内添加清除修复无济于事。

【问题讨论】：

你不能使用float 来浮动绝对定位的元素。要么使用不带position:absolute 的float，要么将left:Xpx; / right:Xpx; 添加到您的CSS。

是的，你是对的，而且容器是绝对的这一事实意味着将 a 元素设为绝对是没有意义的。所以我现在有了。

【参考方案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;

【参考方案2】：

您可以通过定位或左/右属性来解决此问题。在您的 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;
                

【参考方案3】：

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

【讨论】：

Position: absolute 和 floats 不能很好地发挥作用，所以就像 Edorka 说的，使用 left 和 right 以及 position absolute。

【参考方案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;
        

【参考方案5】：

将right:0; 和left:0; 用于绝对定位元素

【参考方案6】：

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

【参考方案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，这意味着它将浮动在右侧。