嵌套UL列不會左浮動，除非我設置容器寬度明確

Question

這就是我想我的下拉的樣子，關鍵的CSS如下：

「#nav .flyout>李{浮動：左;}

「#nav .flyout.fourCol {width：900px; } 「

http://jsfiddle.net/t7esz/（這工作）

但是，當我設置」 #nav .flyout.fourCol {寬度：自動; }「所有的lis都摺疊在彼此之下，就好像除非我明確地設置了容器的寬度，它們不會左移或者顯示爲內聯。」

http://jsfiddle.net/sumcA/2/（這不行，我希望能夠使用！寬自這裏）

Answer 1

你可以做這樣的事情：

Css

.list { width: 980px; height: 39px; background-color: #878787; } 
.list ul { list-style: none; margin: 0; padding: 0; } 
.list ul li { 
    float: left; 
    padding: 10px; 
    font-size: 14px; 
    background-color: #3c3c3c; 
    margin-right: 5px; 
} 

Html

<div class="list"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>No width set</li> 
    </ul> 
</div> 

它看起來就像這樣：

http://img36.imageshack.us/img36/2721/noautoulli.png