css - 压缩导航链接或固定它们占用空间的技术，这样它们就不会奇怪地环绕

Question

这是我经常遇到的问题:

给定一些水平导航链接，有什么方法可以确保链接不会挤压在一起，以至于它们会向上或向下推到两条线上？

我认为只需为这些导航链接的容器设置最小宽度就可以了(例如，将 ul 或 ul 的容器 div 设置为 min-width:500px)，但如示例所示，事实并非如此足够的。我觉得我只是缺少一些简单的东西，但这是一个未知的未知数。

编辑:我删除了 li 元素上的一些边距，它最终停止换行为两行。不过，我仍然不明白为什么添加的填充会导致环绕，而不是简单地扩展包含元素的宽度。

那么你们有什么技巧可以使导航链接保持水平条形？

这是一个 jsfiddle，其中包含我正在使用的大致当前示例: http://jsfiddle.net/tchalvakspam/nE8yU/5/

Answer 1

您想让它们可见吗？如果您不希望它们换行，一种选择是不显示它们。如果您想这样做，这将起作用:

#admin-header {
    overflow: hidden;
    white-space: nowrap;  
}