右浮动左浮动？

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

来源

2013-08-20 Alex Howell

U不能使用float来浮动绝对定位的元素。无论是使用float还是'position：absolute'，或者添加'left：Xpx;'/'right：Xpx;'到你的CSS。 – putvande

是的，你是对的，更进一步的事实是，容器是绝对的意味着没有必要使a元素成为绝对的。所以我现在拥有它。 –

您可以通过定位或通过左/右属性来解决这个问题。在你的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-20 17:01:52

我会用左手设置：0像素的右：0像素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-20 16:41:18 Edorka

位置：绝对和漂浮不会很好地发挥，就像Edorka说的那样，在绝对位置使用左右。 –

你并不需要浮动的元素，一旦你有他们绝对定位：如果他们是在流

#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-20 16:42:47

元素只能被浮置。绝对定位的元素不在流中，因此不能浮动。尝试使用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-20 16:43:15

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

来源

2013-08-20 16:43:49

你不需要在你的#prev和#next position: absolute;，除非你想让他们堆上层建筑的海誓山盟。

来源

2013-08-20 16:45:12 Marc

我测试了你的代码，问题是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，这意味着它会漂浮在右侧。

来源

2013-08-20 16:45:42

右浮动左浮动？

回答

相关问题