css - 水平 ul 的高度设置为零。为什么？

Question

我还想在页面内显示我的超级菜单的内容。我复制了 CSS 样式，但似乎我仍然错过了一条规则，因为 id="wrongBorder_because_of_no_Height" 的 UL 的边框没有显示在整个 UL 周围，可能是因为 UL 高度为 0

示例页面 - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm

【比较family 2的浮动菜单的边框，和页面中UL的边框】

• 什么将水平 ul 的高度设置为零？
• 如何正确显示边框？

Answer 1

添加overflow:hidden或添加overflow:auto到您的班级

#wrongBorder_because_of_no_Height
{
  overflow:hidden;
}

这样做的原因是因为通过将溢出属性设置为不可见的值 - 这会触发block formatting context.

查看这篇文章以获得完整的解释。

Answer 2

将此添加到您的 CSS 中：

.menuInPage ul 
{
height: 200px;
}

Answer 3

您正在浮动左侧的 li 元素。父元素 ul 永远不会扩展为包含浮动子元素。

尚未检查这是否是您想要的，但请删除浮动或尝试overflow:auto。