Как создать упорядоченный список jquery для мобильных устройств с установленными снаружи символами списка?

Question

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

Результат:

   1.
   Heading 
   Description

Я хочу:

    1.    Heading
          Description

Я бы подумал, что мог застрять в позиции списка стилей: снаружи как встроенный стиль с тегом li. Неудачно. Если я удаляю роль data-listview, стиль применяется правильно.

Как-то, как роль даты просмотра списка манипулирует стилями, я не могу понять, как, хотя ... Я искал строку позиции списка стиля в файлах jquery mobile css и js, и никаких результатов не было вернулся, что здесь происходит?

Помогите, пожалуйста?

PS. используя jquery mobile 1.0a4.1

Answer 1

У меня была такая же проблема при создании нумерованного списка в моем мобильном приложении jquery. Css ниже исправил проблему для меня:

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

Answer 2

Похоже, вам нужно добавить несколько пользовательских CSS

Live Пример: http://jsfiddle.net/7Bn2z/43/ Пример Live №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;
}

UPDATE:

Если у вас установлен 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>