html – 使用溢出时的额外空间：隐藏在内联块列表中

参考：http://jsfiddle.net/CZk8L/4/

任何人都可以向我解释为什么溢出：隐藏的样式会在第一个li的底部产生这个额外的空间吗？

这让我疯狂了好几个小时.

事实是我需要这个职位：亲属;溢出：隐藏在我的第一个li上,因为我要隐藏的形式并在其中移动(跟随光标).

我试图在每个元素上设置一些高度或最大高度,但它不起作用.
我也尝试了一些行高

重新调整两个li的解决方案可以是添加相同的位置：relative;溢出：隐藏在第二个li上,但它仍然是它们下面的额外空间,我想了解根本原因.

谢谢你的帮助！

最佳答案

更改ul填充：5px到填充：0px以避免li下的空间.

 ul {display: inline-block; background:#DDD; padding:0px;white-space: Nowrap; margin:50px 200px;}

您可以使用vertical-align：top对齐li;

   .with_overflow li:first-child {position: relative; overflow: hidden;vertical-align: top; }
    .with_overflow form {position: absolute; opacity: 0;}
    .with_overflow iframe {display:none}

See updated fiddle