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

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.