html - 使用溢出时的额外空间 :hidden in inline-block list

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;}

您可以使用 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