如何删除超级鱼菜单 ul 和父 div 之间的间距答案

【问题标题】：How to remove spacing between superfish menu ul and parent div如何删除超级鱼菜单 ul 和父 div 之间的间距
【发布时间】：2011-11-20 04:55:17
【问题描述】：

我有使用 Superfish jquery 插件 http://users.tpg.com.au/j_birch/plugins/superfish 制作的菜单

但我有一些问题，当我在 Firefox、Chrome 和 IE 中查看我的页面时添加了填充：

这里是 jsfiddle 示例 http://jsfiddle.net/YsG97/2/ 可能有人会建议如何删除 Superfish 菜单 ul 和标题 div 之间的间距？

我不雅地发现了一个奇怪的事情，如果我在菜单结束标记后加上 &nbsp：</ul>&nbsp; 它是 Firefox 中的固定间距，不知道为什么。有人可以解释一下吗？

【问题讨论】：

这太奇怪了。我通过删除 superfish.css 然后设置 .sf-menu div { float: none; }.. 解决了这个问题。但显然你需要 superfish.css 并且这不适用于包含它..
@Kyle Sevenoaks 目前我正在尝试让它在没有那个 css 的情况下工作，但是在弹出 ul 时遇到问题
jsfiddle.net/Kyle_Sevenoaks/YsG97/3 在此处随心所欲地查看它没有包含的 superfish 菜单 css。
也有这个解决方案很好用stackoverflow.com/a/9727799/1197092

【解决方案1】：

如果你在结束 ul 标记之后添加一个清除元素，它会匹配到底部。浮动有问题，不确定是什么问题，但这解决了它（尽管 #menucontainer div 中的高度增加了。

【讨论】：

【解决方案2】：

给你：

#menucontainer {
    ...
    vertical-align: top;
}

现场演示： http://jsfiddle.net/YsG97/5/

#menucontainer DIV 具有display: inline-block 集，这实际上使其成为内联元素。内联元素默认与基线对齐，这意味着它们下方会有空间（基线和下降部分之间）：

【讨论】：