html - 使用 nowrap 的元素会卡在 WebKit 中的相邻元素上

Question

我有一个显示为水平菜单的 ul 列表。我希望每个 li 的内容都保留在一行中，但整个 li 元素都可以根据需要跳行。像这样的东西:

菜单中的第一个条目 第二个菜单条目
这些词很短，LI 跳行，但不换行
还有一个] [还有更多] [更多]

逻辑上，我只是放li {white-space:nowrap;}，但是WebKit 浏览器有问题。 带有 nowrap 的元素会粘在相邻的元素上。所以在上面的例子中，所有的 li 都将在同一行。

这同样适用于在环绕文本 block 内带有 nowrap 的独立元素。

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

我期望的是这样的:

访问我的网站 Gabriel Radic .com 或
Timbru 博客

相反，这两个链接最终粘在一起，例如:

访问我的网站
Gabriel Radic .com 或 Timbru 博客(罗马尼亚语)

有什么好的方法可以告诉 Safari、Chrome 和其他软件停止捕获人们的肘部吗？

谢谢你的帮助。

Answer 1

与其使用 white-space:nowrap，在这种情况下使用 display:inline-block 更合适。

CSS 需要随处调整以适应更改，但它按预期工作。