带有nowrap的元素会卡在WebKit中的相邻元素 [英] Elements with nowrap get stuck to adjacent elements in WebKit

问题描述

我有一个 ul 列表，显示为水平菜单。我想让每个 li 的内容保持在一行，但是整个 li 项目跳转线必要。类似：

菜单中的第一个条目 第二个菜单项

这些词很短，LI跳线，但不换行

c> $
$ b

逻辑上，我只是把 li {white-space：nowrap;} ，但是WebKit浏览器有问题。 包含nowrap的项目会粘附到相邻项目。因此，在上述情况下，所有 li 将位于同一行。

在包装文本块中使用 nowrap 的隔离元素也是如此。

 < p>访问我的网站< a href =http://gabrielradic.com/style =white -space：nowrap> Gabriel Radic 
 .com（英语）< / a>或< a href =http://www.timbru.com/style =white-space：nowrap> Timbru博客
（罗马尼亚语）< / a> ;. 
  

我会期望的是：

造访我的网站 Gabriel Radic .com 或

Timbru Blog

而是，两个链接最终粘在一起，例如：

访问我的网站

Gabriel Radic .com 或 Timbru博客（罗马尼亚语）

感谢您的帮助。

解决方案

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

CSS需要适应这里的变化，但它的工作原理。

I have a ul list that I display as a horizontal menu. I'd like the content of each li to remain on one line, but the entire li items to jump lines as necessary. Something like:

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]

Logically, I'd just put li {white-space:nowrap;}, but there is a problem with WebKit browsers. Items with nowrap get stuck to adjacent items. So in the case above, all the li will be on the same line.

The same goes for an isolated element with nowrap inside a wrapping text block.

<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>.

What I would expect is something like:

Visit my sites Gabriel Radic .com or
Timbru Blog

Instead, the two links end up stuck together, like:

Visit my sites
Gabriel Radic .com or Timbru Blog (Romanian)

Is there a nice way to tell Safari, Chrome and others to stop grabbing people's elbows?

Thanks for you help.

解决方案

Instead of using white-space:nowrap, in this case it's more appropriate to go with display:inline-block.

The CSS needs to be adapted here and there for the change, but it works as expected.

这篇关于带有nowrap的元素会卡在WebKit中的相邻元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！