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

Question

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

按钮的背景在UL元素中设置。我注意到的是，如果我删除UL元素的高度和宽度属性，背景图像就会消失，就像UL大小变为零一样。从盒子模型的角度来看，这对我来说没有意义。子元素（LI）已设置尺寸，因此应延伸UL的大小。有人可以解释发生了什么吗？

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

Answer 1

<li>已浮动，因此会从文档流中删除它们，导致<ul>崩溃。

要表现得像您期望的那样，请尝试将float: left;添加到<ul>。

Answer 2

根据教程，LI是float：left，这使得它们不再占用父元素（UL）中的空间。您需要一个clearfix来解决此问题，请参阅此主题：What methods of ‘clearfix’ can I use?

Answer 3

我一直使用的一个很好的解决方法是将<ul>放在<div> <div id="nav"><ul>...</ul></div>中，然后将背景图片应用到<div>元素。

更好的回答：

在CSS中，将display: table-row;添加到ul元素，将display: table-cell;添加到li元素。这比float: left更好，因为它不会折叠您的父元素和display: inline-block，因为它不会在项目之间出现令人讨厌的差距。