jquery - 为什么这个 ListView 位于前一个 之上？

Question

我正在创建一个页面 jQuery Mobile我有以下 HTML:

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <p>You need to select a page:</p>

        <ol data-role="listview">
            <li><a href="#page2">Item 1</a></li>
            <li><a href="#page2">Item 2</a></li>
        </ol>
    </div>
</div>

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page 2</h1>
    </div>

</div>

它的行为符合预期，但在 Chrome 10.0.648.205 上，我看到以下内容:

请注意 <p>被列表遮盖了。为什么列表与文本重叠？

注意:您可以在此处使用代码:http://jsfiddle.net/r2whr/

Answer 1

出于某种原因， ListView 的边距默认为 -15px。只需将listview ol的边距设置为0即可:

<ol data-role="listview" style="margin:0;">
    <li><a href="#page2">Item 1</a></li>
    <li><a href="#page2">Item 2</a></li>
</ol>

(或者，如果您仍希望列表的其余部分周围有 -15px 的边距，则只需将上边距设置为 0。)