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

【问题标题】：When I set a background image for UL why do I have to set width and height when child elements already have these set?当我为 UL 设置背景图像时，当子元素已经设置了这些时，为什么我必须设置宽度和高度？
【发布时间】：2012-03-15 12:38:55
【问题描述】：

我正在学习使用 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;
    }

【问题讨论】：

标签： css height width background-image html-lists

【解决方案1】：

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

如您所愿，请尝试将float: left; 也添加到<ul>。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

更好的答案：

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

【讨论】：

我也试过这个。也有类似的问题。不过，这似乎是一种普遍的好方法。