为什么此列表视图位于上一个<p>之上？

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