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

时间:2012-02-25 04:45:31

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

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

更好的回答:

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