Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element.
Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizontal list.
The issue lies in my inability to have the tag-it element align on the same line as the other elements before it.
To clarify, this question is not about creating a horizontal list, but rather placing a ul inside a ul on a single line.
For 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>
You can see the example in action on jsfiddle.
Thank you in advance!
Edit:
While the suggested solutions may work for a straightforward example, they do not apply to the Tag-it plugin specifically - the focus of my query. Therefore, I have adjusted the title and provided examples that do not function with the current answers: Example 1 Example 2