Question

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

有人可以向我解释为什么overflow:hidden样式会在第一个li的底部生成这个额外的空格吗？

这让我疯狂了几个小时。

事实是我需要position:relative; overflow:hidden在我的第一个li，因为form我要隐藏并在其中移动（跟随光标）。

我尝试在每个元素上设置一些height或max-height，但它不起作用。我还尝试了一些line-height

重新对齐li的解决方案可能是在第二个position:relative; overflow:hidden上添加相同的li，但它仍然是它们下面的额外空间，我想了解根本原因。

感谢您的帮助！

Answer 1

将ul padding:5px更改为padding:0px以避免li下的空间。

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

您可以使用li

对齐vertical-align: top;

   .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

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

1 个答案: