html - 允许浮动水平菜单随窗口调整大小而无需换行

Question

我有一个标题，其下方有一个小水平条，用作我网站的主要导航。当窗口全尺寸时，它工作得很好。但是，如果窗口的大小调整得更小一点，最右边的菜单就会向下移动到下一行，就像您期望任何浮动元素一样。

问题：如何使导航栏始终保持在一条线上，并根据窗口大小适当调整大小？我尝试将长度更改为百分比，但这通常会导致问题，因为 CSS 有很多组件。

以下是所有相关代码：http: //jsfiddle.net/HSVdg/1/

这是我认为的罪魁祸首，尽管我可能是错的：

.menu2 li {
    position: relative;
    float: left;
    width: 150px;
    z-index: 1000
}

上面链接的一些注释：

我正在使用 Tiny Drop Down 2 ( http://sandbox.scriptiny.com/tinydropdown2/ ) 的下拉功能（以 JS 和 CSS 的形式，在评论中注明），尽管下拉实际上不起作用在jsfiddle中。我很确定所有 JS 都与我的问题无关。
这些按钮没有与实际的条垂直排列，但这再次不是主要问题，因为这不是在我的实际站点上发生的。
jsfiddle 中的窗口大小实际上并不能容纳按钮的整个长度，因此您会立即看到按钮移动到下一行的问题。

任何帮助将不胜感激！

score 0 · Accepted Answer

您可以通过使用 CSS 显示模式来做到这一点。

只需将 ul 设置为具有 display:table 和要显示的子列表项：table-cell

表格单元格将自动调整宽度以填充任何宽度的父表格。

您需要从中删除显式宽度

<li>

和

<a>

让它们自动运行。

我已经为你更新了小提琴：http: //jsfiddle.net/HSVdg/13/

希望这可以帮助。

1 回答 1