CSS浮動元素導致其他元素的背景顏色消失

Question

我測試了CSS，看到它是如何在水平menue浮動元素的作品：

<ul id="navlist"> 
    <li><a href="#">Item one</a></li> 
    <li><a href="#">Item two</a></li> 
    <li><a href="#">Item three</a></li> 
</ul> 

ul#navlist { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: cyan; 
} 
ul#navlist li { 
    display: inline; 
    background-color: pink; 
} 

/*ul#navlist li a { 
    float:left; 
}*/ 

我使用的背景顏色直觀地看到什麼影響。下面是輸出：

output

通知列表項的左間隙。現在，當我取消註釋/插入下面一行：

ul#navlist li a { 
     float:left; 
    } 

的間隙消失（我故意的），但背景顏色都ul和li消失。 Output這是爲什麼？

Answer 1

由於內容是浮動的，所以背景是絕望的，所以父母的高度變爲零。實際上，鏈接只在<li>上固定，而不是在裏面，明白了嗎？！

將<li>顯示類型更改爲inline-block，並可選地爲您的<li>元素設置高度。