css - 当我为 UL 设置背景图像时，为什么当子元素已经设置了这些设置时我必须设置宽度和高度？

Question

我正在学习有关使用 CSS 创建按钮的教程。 http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

按钮的背景在 UL 元素中设置。我注意到，如果我删除 UL 元素的高度和宽度属性，背景图像就会消失，就好像 UL 大小变为零一样。从盒子模型的 Angular 来看，这对我来说没有意义。子元素 ( LI ) 具有设置的尺寸，应该相应地扩展 UL 的尺寸。谁能解释一下这是怎么回事？

    ul {
    list-style-type: none;
    background-image: url(navi_bg.png);
    height: 80px;
    width: 663px;
    margin: auto;
    }

Answer 1

<li> s 是 float 的，因此它们从导致 <ul> 的文档流中删除崩溃。

要像您期望的那样运行，请尝试添加 float: left;到 <ul>以及。