css - float 's with seemingly all margin' s 设置为 "0,"但仍然看到 sibling 之间的空间？

Question

所以我正在创建一个无序列表，向右浮动并使用不同的背景设置样式来设计菜单。

设置 Jquery(动画队列、悬停时重复动画等)真是太难了，但我终于让它工作了。这是用于导航和动画的 CSS 和 Jquery。

    <script type="text/javascript">

    $(document).ready(function(){

        $("#nav li").hover(function() {

            $(this).children('p').stop(true, true).animate({opacity: "show"}, "fast");

        }, function() {

            $(this).children('p').stop(true, true).animate({opacity: "hide"}, "fast");

        });

    });

</script>

#nav {
   margin:0;
   padding:0;
   background:#FF0000;
   clear:both;   
   float:right;   
  }  
#nav li {  
   position:relative;
   list-style:none;   
   padding-left:0;   
   margin-left:0;   
   float:right;   
   width:75px;   
  }  
#nav li a {   
   display:block;   
   width:75px;   
   height:48px;   
   margin-left:0;   
   padding-left:0;   
   Z-index:20;  
  }
.hover {   
   display:none;  
   position:absolute;  
   top:0;
   left:0;  
   height:48px;  
   width:75px;   
   z-index:0;   
  }  
.nav1 a {   
   background-image:url(images/nav_1.gif) 
  }  
.nav2 a {   
   background-image:url(images/nav_2.gif) 
  }
.nav3 a {   
   background-image:url(images/nav_3.gif) 
  }
.nav4 a {   
   background-image:url(images/nav_4.gif) 
  }  
.nav1 p.hover {   
   background-image:url(images/nav_1_hover.gif) 
  }
.nav2 p.hover {   
   background-image:url(images/nav_2_hover.gif) 
  }
.nav3 p.hover {   
   background-image:url(images/nav_3_hover.gif) 
  }
.nav4 p.hover {   
   background-image:url(images/nav_4_hover.gif) 
  }  

然后这是菜单的 HTML....

<ul id="nav">            
  <li class="nav1"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav2"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav3"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav4"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
</ul>​

我希望这就足够了——我对 Javascript/Jquery 和 CSS 还是很陌生，而且我似乎无法弄清楚为什么我的菜单项之间有一个缓冲区。

如果有任何帮助，我将不胜感激。

谢谢!

Answer 1

哪个浏览器？我之间没有任何缓冲。

当然，我也没有你的图片可以使用。可能发生了一些溢出。

尝试添加clip:auto; overflow: hidden; 到你的 #nav li a。

#nav li a {   
   display:block;   
   width:75px;   
   height:48px;   
   margin-left:0;   
   padding-left:0;   
   z-index:20;

   clip: auto;
   overflow:hidden;
}

此外，我对此可能是错误的，但据我所知，您需要设置定位才能使 z-index 生效。比如:position:relative。