html - 除非我明确设置容器宽度，否则嵌套的 UL 列不会向左浮动

Question

这就是我希望我的下拉列表看起来的样子，下面列出的关键 css：

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

“#nav .flyout.fourCol { 宽度：900px; }”

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

但是，当我设置“#nav .flyout.fourCol { width:auto; }”时，所有的 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