Horizontal scrolling with jQuery Tag-it

Question

I'm using jQuery Tag-it for something I'm working on. However, I don't like that whenever I type too many tags, the overflow appears below the tags I've already typed as opposed to just appending the newer tags to the right of whatever I've already typed.

What I want is to have tags always be appended to the right of the other tags, and allow a user to scroll horizontally to see new tags.

Here's the example page which I've been trying to play with: http://aehlke.github.com/tag-it/examples.html

Here's my first try:

ul.tagit { height: 40px; overflow-x: auto; }

Second try:

ul.tagit { height: 40px; overflow-x: auto; white-space: nowrap; }
ul.tagit li { display: inline; }

Neither seem to work.

Answer 1

can you create a fiddle. this seems like its working using inline http://jsfiddle.net/REgGC/

Answer 2

The code from btevfik found under works: http://jsfiddle.net/btevfik/qUsG8/

The problem I encountered however with that piece of code was, that when removing tags the <ul> popped down to a second line and immediately jumped up again when the tag was removed. This can be solved by setting animate: false in the tag-it.js file.