CSS菜单自动宽度 - 链接多个单词换行符

Question

这是一个方便的现场演示：http://jsfiddle.net/Lr6NQ/2/

在ul#navigation ul上，如果有明确的宽度，则链接会按预期显示在各自的“行”上。但是，由于链接的宽度不同，我宁愿将其保留为"auto"，因此对于内容较短的列表，<ul>并不是很宽。

如何在不设置显式宽度的情况下阻止链接断行。如果链接是一个单词，我会得到所需的效果，但是对于多个单词，<ul>只会与最长的单词一样宽。

Answer 1

ul#navigation li {
    white-space:nowrap; /* <-- ADDED */
    float:left;
    width:auto;
    padding:10px;
    margin-right:10px;
    position:relative;
}

如果您想缩短长线，请在锚点中添加<br />。

Answer 2

您可以使用不间断的空格。而不是链接中的空格，请使用＆amp; nbsp;。