如何强制嵌套列表与 jQuery Mobile 保持内联？答案

【问题标题】：How to force a nested list to remain inline with jQuery Mobile?如何强制嵌套列表与 jQuery Mobile 保持内联？
【发布时间】：2011-04-27 04:22:12
【问题描述】：

我有一个想要嵌入到另一个列表中的列表。然而，jQuery Mobile 想要为嵌入列表创建一个单独的页面。

这是我所拥有的：

<ul data-role="listview">
    <li>Item 1</li>
    <li>
        Item 2
        <ol>
            <li><p>Embedded item 1</p></li>
            <li><p>Embedded item 2</p></li>
        </ol>
    </li>
</ul>

我更喜欢不涉及内部列表的解决方案，因为它实际上是从外部源中提取的。

有没有办法让列表内联显示？

【问题讨论】：

标签： jquery html jquery-mobile html-lists

【解决方案1】：

这在 alpha3 和 alpha4 之间发生了变化。您需要做的就是将 ol 包装在一个 div 中，它会显示（不是很漂亮，但会显示）

从那里您可以将其设为列表视图并将其设置为 inset 以使其看起来更好。

见：http://jsfiddle.net/MyHaB/1/

【讨论】：

太棒了！另一个快速的问题...在您的示例中，我注意到嵌套列表上的数字位于单独的行上。有什么办法可以解决吗？
删除 P 标签将为您解决问题。如果您希望它与此不同，则需要查看它的一些 css。

【解决方案2】：

对于那些在 Google 上寻找类似解决方案的人。

解决此问题的另一种方法是使用 inlinelistview 插件。它允许列表视图项在列表中打开内联，然后由用户再次切换关闭。

On Github

【讨论】：