html - 有没有办法强制水平导航菜单中的多字 li 保持在一行？

Question

我有一些 HTML：

<nav>
    <ul>
        <li>Menu Item One</li>
        <li>Menu Item Two</li>
        <li>Menu Item Three</li>
    </ul>
</nav>

这是一个水平菜单。我列表中的链接数量使得导航需要下降到两行。但我不希望它掉在里里的某个地方。也就是说，因为我的链接是多字的，所以它往往会落在项目的中间。有什么方法可以强制下一行始终位于<li>元素之间的某个位置？

Answer 1

只需将 css 添加white-space:nowrap;到 li 的

Answer 2

大概您可以尝试用不间断空格替换 li-items 中的空格，如下所示：

<nav>
    <ul>
        <li>Menu&nbsp;Item&nbsp;One</li>
        <li>Menu&nbsp;Item&nbsp;Two</li>
        <li>Menu&nbsp;Item&nbsp;Three</li>
    </ul>
</nav>

Answer 3

nav li {display:block; float:left; white-space:pre;}

在这里查看界面：http: //jsfiddle.net/3h9Kw/