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 />在 anchor 中。