Question

即时使用Tag-it jquery插件，该插件适用于ul元素。

我有一个水平列表（带有几个li元素的ul），我想在主水平列表中添加另一个包含Tag-it ul列表的li元素。

问题是我无法使tag-it元素在同一行，即使它之前的元素在同一行上。

再次 - 问题不在于制作水平列表。它是关于在一行中在ul中创建一个ul。

示例：

    <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>

这是jsfiddle

中的示例

感谢分配！

修改

建议的答案，虽然简单示例的工作不适用于标签 - 它插入 - 我在这个问题中关注的那个。所以我编辑到标题，这里的示例不适用于当前的答案 example 1 example 2

Answer 1

默认情况下，无序列表为display: block。为了使它们以内联方式显示，您只需将<ul>设置为display: inline。

Answer 2

你必须内联所有内容，以便在一行中获得它。

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; }

更新：将ul ul更改为内联表。我更新了您的jsfiddle。

使用jquery＆＃39; s tag-it插件在ul行内的ul

2 个答案: