jquery - 如何创建一个 jquery mobile 有序列表，并将列表符号设置为外部？

Question

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

结果是:

   1.
   Heading 
   Description

我想要:

    1.    Heading
          Description

我本以为我可以将 list-style-position:outside 作为带有 li 标签的内联样式。没有运气。如果我删除 ListView 数据角色，则样式将正确应用。

listview date-role 是如何操作样式的，但我不知道如何...我在 jquery mobile css 和 js 文件中搜索了 list-style-position 行，但没有结果回来了，这是怎么回事？

请帮忙吗？

PS。使用jquery mobile 1.0a4.1

Answer 1

看起来您需要添加一些自定义 CSS

实例:http://jsfiddle.net/7Bn2z/43/ 实例#2:http://jsfiddle.net/7Bn2z/48/ (稍微修正了布局)

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

更新:

如果您安装了 Chrome，您可以右键单击此处的示例页面:http://jsfiddle.net/7Bn2z/49/并检查元素。如您所见，jQM 添加了 CSS

因此，在示例中我们从以下内容开始:

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

jQM 将其标签添加到此:

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