當我爲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

根據教程，LIs是float：left，這使得它們不再佔用父元素（UL）中的空間。你需要一個clearfix解決這個問題，看到這個線程：What methods of ‘clearfix’ can I use?

Answer 2

的<li> s的浮動，從而它們從這是造成<ul>崩潰文檔流中去除。

要表現得像你期望的那樣，嘗試添加float: left;到<ul>爲好。

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，因爲它不存在項目之間的那惱人的差距。