title: how to keep inline items from wrapping?
body: <p>I've got menu items that look like this</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item1&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;Item2&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;Item3&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre>
  Item1^  Item2^  Item3^
  </pre>
  
  <p>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?</p>