Nested UL Spalten wird nicht float links, wenn ich Behälter gesetzt Breite explizit

Question

Dies ist, was ich meine Drop-Down-wie, Schlüssel css unten aufgeführten aussehen wollen:

„#nav .flyout> li {float: left;}

"#nav.flyout.fourCol {Breite: 900px; } "

http://jsfiddle.net/t7esz/ (das funktioniert)

Aber, wenn ich auf" #nav .flyout.fourCol {width: auto; } "alle lis kollabieren untereinander. Es ist wie, wenn ich nicht explizit die Container Breite setzen sie nicht links schweben oder inline angezeigt.

http://jsfiddle.net/sumcA/2/ (dies funktioniert nicht, ich möchte verwenden können ! Breite auto hier)

Answer 1

Man könnte so etwas tun:

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> 

Und es wird wie folgt aussehen:

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