Why is this listview positioned above the previous <p>?

I'm creating a page with jQuery Mobile and I have the following 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>

开发者_JAVA百科

It behaves as expected, except that on Chrome 10.0.648.205, I see the following:

Notice that the <p> is obscured by the list. Why is the list overlapping the text?

Note: you can play with the code here: http://jsfiddle.net/r2whr/

---

For some reason, the listview's margin is defaulting to -15px all around. Just set the listview ol's margin to 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>

(Or just set the top margin to 0 if you still want the -15px margin around the rest of the list.)

---

Alternatively you could use the list divider instead of the p tag (Just theme it) like this:

http://jsfiddle.net/r2whr/4/

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

    <ol data-role="listview">
        <li data-role="list-divider">You need to select a page:</li> 
        <li><a href="#page2">Item 1</a></li>
        <li><a href="#page2">Item 2</a></li>
    </ol>
</div>

---

As BraedenP mentioned, the listview's margin defaults to -15px on every side. I ran into this same issue, and found out that this is fully intentional:

This is actually working as designed. Here's why: the body content block has 15px of padding so anything you drop in will look evenly spaced and that works well for everything except for these full-width lists.

In most apps, you use a non-inset full width list alone with only toolbars and with no margins between them so we use the 15px margin to circumvent the body padding. If you're mixing and matching lists, buttons, form elements and content, the inset lists look better and that's what they are designed for.

This system makes it very easy for people to use the same markup contentions and it "just works" for most cases. If you have a situation where you want a full-width list stacked with other items, you can add a CSS override as you suggested but it looks pretty odd unless you do some additional styling.

(From a ticket at the jQuery github repo.)