如何保持内联物品不被包裹？

Question

我的菜单项看起来像这样

<ul>
  <li>Item1<span class="context-trigger"></span></li>
  <li>Item2<span class="context-trigger"></span></li>
  <li>Item3<span class="context-trigger"></span></li>
</ul>

使用CSS将上述内容转换为水平菜单，JS将[spans]转换为显示上下文菜单的按钮。模糊地这样：

Item1^  Item2^  Item3^

如果菜单的浏览器宽度太宽，它会换行，这就是我想要的。问题是有时它会在[spans]之前放入换行符。我只希望它在[li]之间打破。有什么想法吗？

Answer 1

尝试使用

white-space: nowrap;

在上下文触发器类的css定义中。

编辑：我认为patmortech是正确的，因为没有“空白”内容，将nowrap放在跨度上是行不通的。也可能是将样式粘贴在LI元素上也不起作用，因为浏览器可能会分解部件，因为span是li中的嵌套元素。您可以重新考虑您的代码，删除SPAN元素并在LI元素上使用css。

Answer 2

您需要使用以下内容来保持列表项不被包装（将它放在context-trigger类中只会保留包装中的span内容）：

li { white-space:nowrap; }

Answer 3

如果你浮动<li>元素，你应该得到你想要的效果。