CODEWITHSUNDEEP
htmlcsslayout
sprugman
sprugman

Reputation: 19831

how to keep inline items from wrapping?

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?

Upvotes: 3

Views: 10924

Answers (3)

Huibert Gill
Huibert Gill

Reputation: 723

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.

Upvotes: 14

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34650

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

Upvotes: 0

patmortech
patmortech

Reputation: 10219

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

Upvotes: 3

Related Questions