how to keep inline items from wrapping?

Question

I've got menu items that look like this

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

with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:

  Item1^  Item2^  Item3^

If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?

Answer 1

try using

white-space: nowrap;

in the css definition of your context-trigger class.

Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.

Answer 2

Duh. For some reason I thought IE6 wouldn't behave correctly with that. How do I downvote my own rep for foolish questions. :)

Answer 3

You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):

li { white-space:nowrap; }

Answer 4

If you float the <li> elements, you should get the effect you want.