Question

我有一个标题，右下方有一个小水平条，作为我网站的主导航。当窗户是全尺寸时，它完美地工作。但是如果窗口的大小调整得更小，最右边的菜单会向下移动到下一行，正如您所期望的任何浮动元素一样。

问题：我怎样才能使导航栏始终保持在一行，适当调整窗口大小？我已经尝试将长度更改为百分比，但这通常会导致问题，因为CSS有很多组件。

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

.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中的窗口大小实际上并不能容纳整个按钮长度，因此您可以立即看到按钮移动到下一行的问题。

非常感谢任何帮助！

Answer 1

您可以使用CSS显示模式执行此操作。

只需将ul设置为display：table即可并且子列表要显示的项目：table-cell

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

您需要从

中删除显式宽度

<li>

和

<a>

允许它们自动化。

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

希望这有帮助。