JQueryMobile 按钮/列表视图重叠

Question

根据我的经验，在按钮 <a data-role="button">..</a> 的上方或下方有一个 <ul> 会导致它们重叠。我的解决方法是大量使用<br>，但这似乎是一个损坏的工作流程。

有人知道这个重叠问题的解决方法吗？

这是一个 JsFiddle 演示我的问题。

这是小提琴中使用的代码：

    <div data-role="content">
        <ul data-role="listview" data-theme="b">
            <li>Hello</li>
            <li>World</li>
        </ul>
        <a data-role="button" href="#">Give me my space!</a>

        <ul data-role="listview" data-theme="b">
            <li>Boring</li>
            <li>workaround</li>
        </ul>
        <BR>
        <a data-role="button" href="#">Give me my space!</a>
    </div>

更新：我玩了更多，使列表视图插入修复了重叠。尽管如此，如果有人知道如何，我想要一种避免重叠而不插入的方法！ New JsFiddle

Answer 1

看起来 jQuery Mobile 的 CSS 中的边距覆盖不正确。

您可以通过指定来解决它：

.ui-content .ui-listview, .ui-panel-inner .ui-listview {
    margin-bottom: 1em;
}

但是，这可能与其他 jQuery Mobile 小部件发生冲突（除非边距覆盖一开始就是一个错误）。

你可以在this updated fiddle看到结果。