ul inside ul on one line with jquery's tag-it plugin

im using Tag-it jquery plugin which works on a ul element.

i have a horizontal list (a ul with several li elements) and i want to add to the main horizontal list another li element that will contain the Tag-it ul list.

the problem is that i cannot make the tag-it element be on the same line, even though the elements before it are on the same line.

again - the question is not about making a horizontal list. it is about making a ul inside a ul all on one line.

example:

    <ul style="list-style:none; padding-left:0;">
    <li style="display: inline;"> 1 </li>
    <li style="display: inline;"> 2 </li>
    <li style="display: inline;"> 3 </li>
    <li style="display: inline;"> 
        <ul style="list-style:none; padding-left:0;">
            <li style="display: inline;"> a </li>
            <li style="display: inline;"> b </li>
            <li style="display: inline;"> c </li>
        </ul>
    </li>
</ul>

here is the example in jsfiddle

thanks allot!

edit:

suggested answers although work for the simple example does not work with the tag-it plug in - the one i am concerned in this question. so i edited to title and here are the examples that does not work with current answers example 1 example 2

Answers


You have to inline everything so you can get it in one line.

HTML

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 
        <ul>
            <li> a </li>
            <li> b </li>
            <li> c </li>
        </ul>
    </li>
</ul>

CSS:

ul { border: 1px solid; }
ul li { display: inline; }
ul ul { display: inline-table;   border: 1px solid; }
ul ul li { display: inline; }

UPDATE: Change the ul ul to inline-table. I updated your jsfiddle.


Unordered lists are display: block by default. In order to make them display inline, you simply have to set the <ul> to display: inline as well.


Need Your Help

jQuery doesn't run after including it to a page

javascript jquery google-chrome

Something strange happening with my Chrome's console! The task is to add jQuery lib to a page and then do some stuff using it (jQuery). I wrote some code:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.