How to create a jquery mobile ordered list with list symbols set to outside?

<ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

The result is:

   1.
   Heading 
   Description

I want:

    1.    Heading
          Description

I would h开发者_如何学Goave thought I could have stuck list-style-position:outside as an inline style with the li tag. No luck. If I remove the listview data-role, the style is applied correctly.

Some how the listview date-role is manipulating the styles, I can't figure out how though... I've searched for the list-style-position line in the jquery mobile css and js files and no results were returned, what is going on here?

Some help please?

PS. using jquery mobile 1.0a4.1

Looks like you need to add some custom CSS

Live Example: http://jsfiddle.net/7Bn2z/43/ Live Example #2: http://jsfiddle.net/7Bn2z/48/ (Fixed the layout a little)

HTML:

<div data-role="page" data-theme="b" id="jqm-home">
    <div data-role="content"> 
        <ol data-role="listview">
            <li>
                <span>
                    <span class="oi-li-heading">heading</span>
                    <span class="oi-li-desc">description</span>
                </span>
            </li>
        </ol>
    </div>
</div>

CSS:

.oi-li-heading {
    font-size: 16px;
    font-weight: bold;
    margin: .6em 0;
}

.oi-li-desc {
    font-size: 12px;
    font-weight: normal;
    margin: -.5em 0 .6em;
}

UPDATE:

If you have chrome installed you can right click the example page here: http://jsfiddle.net/7Bn2z/49/ and inspect element. As you can see jQM adds a to of CSS

So in the example we start off with:

<ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

And jQM adds it's tags to this:

<ol data-role="listview" class="ui-listview">
    <li class="ui-li ui-li-static ui-body-c">
        <h3 class="ui-li-heading">heading</h3>
        <p class="ui-li-desc">description</p>
    </li>
</ol>

I had the same issue when creating a numbered list in my jquery mobile app. The css below fixed the problem for me:

  ol.ui-listview .ui-li-heading {
    display: inline-block;
    width: 100%;
    margin-left: -1.3em;
    text-indent: 1.3em;
    vertical-align: middle;
  }