如何创建一个 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日期角色是如何操纵样式的，但我不知道如何...我在jquery mobile css和js文件中搜索了list-style-position行，但没有返回结果，什么这是怎么回事？

请帮忙吗？

附言。使用jquery移动1.0a4.1

Answer 1

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

Live 示例： 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>

Answer 2

在我的 jquery 移动应用程序中创建编号列表时，我遇到了同样的问题。下面的 CSS 解决了我的问题：

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