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日期角色如何操作样式，我无法弄清楚如何...我在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>

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

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

2 个答案: