这就是我希望我的下拉菜单的样子,下面列出了关键的 CSS:
“#nav .flyout > li { float:left; }
“#nav .flyout.fourCol { width:900px; }”
http://jsfiddle.net/t7esz/ (这有效)
但是,当我设置“#nav .flyout.fourCol { width:auto; }”时,所有的 lis 都在彼此下方折叠。这就像除非我明确设置容器宽度,否则它们不会向左浮动或内联显示。
http://jsfiddle.net/sumcA/2/ (这不起作用,我希望能够在这里使用 width auto!)
最佳答案
你可以这样做:
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
关于html - 除非我明确设置容器宽度,否则嵌套的 UL 列不会向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10114913/