Kendo Tabstrip items alignment

Question

I am facing an issue. I have kendo tabstrip items displayed side by side. Say if I have 4 tabs and I resize my window, the tabstrip items are getting distorted. Instead of displaying side by side, on window resize they are moving down to the next line. I have used the below css styles in the example.

#list1 ul {list-style: none;}
#list1 li {display: inline;padding-left:5px; padding-right:5px;}

Here is the jsfiddle link. resize the window and see how the li items move below one another.

http://jsfiddle.net/k027vw4a/

Answer 1

You didn't say what you expect them to do instead. This is how HTML fundamentally works; inline items wrap when they are too wide for the page.

Your jsFiddle also doesn't include Kendo, so the element isn't a Kendo tab strip.

If you would rather have a scroll bar, you can disable line wrap on the elements with:

#list1 ul {
    white-space: nowrap;
}