Question

Recently, I use JQuery-UI tabs(http://jqueryui.com/tabs/) and get stuck when I try to use many tabs-nav li-s.

The excessive tabs-nav li-s go to the next line.

I want it to go in one line, with no linebreak, and scroll when it needs.

I serach for a lot of questions, and try many ways, but none solve mine.

Similar questions but not jquery-ui tabs are: Divs next to each other, with size, no linebreak

Wait for your valuable answers!

=============

Refer the html source codes here:Example

And the CSS are:

/* JQuery-UI tabs overwrites - set the width as small as possible! */
.ui-tabs { width:100px; }
.ui-tabs .ui-tabs-nav {}
.ui-tabs .ui-tabs-nav li {}

Answer 1

We did this on Compilr.com by hacking up the existing jquery-ui tabs plugin and the markup for it. I’m working on getting it cleaned up so we can open source it as a plug-in but for now you might just have to try and pick it apart using firebug or equivalent. I’ve been re-writing it from scratch and it’s not quite done yet but I’ll keep you posted.

Changing the markup and css around the tabs were really the key component to pulling this off.

EDIT:

I’ve started a very basic implementation using bootstrap. You can fork it on GitHub here: https://github.com/MarkMurphy/slidetabs