如何防止内联项目包装？答案

【问题标题】：how to keep inline items from wrapping?如何防止内联项目包装？
【发布时间】：2010-09-20 16:50:24
【问题描述】：

我的菜单项看起来像这样

<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] 变为显示上下文菜单的按钮。大致是这样的：

项目1^ 项目2^ 项目3^

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

【问题讨论】：

标签： html css layout

【解决方案1】：

尝试使用

white-space: nowrap;

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您需要添加以下内容以防止列表项被换行（将其放在上下文触发器类中只会防止跨度内容被换行）：

li { white-space:nowrap; }

【讨论】：