如何创建一个列表符号设置为外部的 jquery 移动有序列表？答案

【问题标题】：How to create a jquery mobile ordered list with list symbols set to outside?如何创建一个列表符号设置为外部的 jquery 移动有序列表？
【发布时间】：2011-05-11 19:08:59
【问题描述】：

<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 行，但没有结果回来了，这是怎么回事？

请帮忙？

附言。使用 jquery mobile 1.0a4.1

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

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

实时示例：http://jsfiddle.net/7Bn2z/43/ Live Example #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>

【讨论】：

Hrm，您的示例似乎可以在 jsfiddle 中使用，但是当我将其复制到我的项目时却没有。我正在使用 jquery.js v1.4.4 和 jquery-mobile.js vs1.0a4.1。我注意到 jsfiddle 没有提到 jquery mobile。
实际上我使用的是 jquery.js v1.5.2 和 jquery-mobile.js v1.0.a4.1，我在第二个示例中也稍微更改了 CSS
好的，代码有效。起初我使用的是你原来的例子。我希望有一个更好的解决方案，我不喜欢依靠填充来对齐东西。如果您在几个不同的浏览器中查看代码，则输出将不一样。我希望得到一个关于为什么将 list-style-position 设置为 li 的原因不起作用以及如何覆盖它的答案。
嗯，它确实有效，除非您添加另一个标签，如
或

标签，这会抛出显示并将新元素设置在数字下，而不是将数字保持在元素的左侧。我会将此作为一个问题提出来，看看他们的 jQM 开发人员怎么说。您可以在此处关注问题：github.com/jquery/jquery-mobile/issues/1609
这是数字列表工作的示例：jquerymobile.com/demos/1.0a4.1/docs/lists/…，但您可以看到它内联显示。当添加标题和描述标签时，这也会添加 CSS，这会导致有序列表的显示

【解决方案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;
  }

【讨论】：

或