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;
  }