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

trying to apply style attributes on a dynamically generated html markup

c# asp.net css webforms

is it a known issue / problem, not being able to use hardcoded(standard) CSS-style setting, on a dynamically (code behind) Generated Html markup ?

Output stream on powershell for SSH calls

php powershell ssh

My PHP script (in Linux) is not printing my values on screen, however it prints a Warning message.

How to force all links to open in iframe

php iframe hyperlink

Is there a way of forcing every link to open in an iframe? I have control of some of the websites I want to show but not others. I am willing to use php or javascript.

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.