3

我有一个ul显示为水平菜单的列表。我希望每个项目的内容都li保留在一行上，但整个li项目会根据需要跳行。就像是：

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

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

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 和其他人停止抓人的手肘？

谢谢你的帮助。

4

2 回答 2

2

而不是使用white-space:nowrap，在这种情况下，更适合使用display:inline-block.

CSS 需要在这里和那里进行调整以进行更改，但它可以按预期工作。

于 2010-03-06T12:11:39.927 回答
1

因此，如果我理解正确，您希望列表项中的文本换行，而不是菜单本身，对吗？所以它看起来像：

item one | item two | item number | item four 
                         three

但不要让它看起来像：

item one | item two | item number three | 
item four

如果是这种情况，您是否尝试过将 设置nowrap在实际ul而不是列表项上，因为这ul是您试图不换行的？然后为列表项设置一个宽度，以便它们可以换行以适应该宽度。

于 2010-03-06T11:51:22.257 回答