Почему этот просмотр списка расположен выше предыдущего <p>? - PullRequest
Новая
       15

Почему этот просмотр списка расположен выше предыдущего <p>?

3 голосов
/ 25 апреля 2011

Я создаю страницу с jQuery Mobile , и у меня есть следующий HTML-код: 

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <p>You need to select a page:</p>

        <ol data-role="listview">
            <li><a href="#page2">Item 1</a></li>
            <li><a href="#page2">Item 2</a></li>
        </ol>
    </div>
</div>

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page 2</h1>
    </div>

</div>

Он ведет себя, как и ожидалось, за исключением того, что в Chrome 10.0.648.205 я вижуследующее:

enter image description here

Обратите внимание, что список <p> скрыт.Почему список перекрывает текст?

Примечание: Вы можете поиграть с кодом здесь: http://jsfiddle.net/r2whr/

Ответы [ 3 ]

6 голосов
/ 25 апреля 2011

По какой-то причине поле listview по умолчанию составляет -15px. Просто установите для поля listview значение 0: 

<ol data-role="listview" style="margin:0;">
    <li><a href="#page2">Item 1</a></li>
    <li><a href="#page2">Item 2</a></li>
</ol>

(Или просто установите верхнее поле равным 0, если вы все еще хотите, чтобы оставалось поле -15px для остальной части списка.)

2 голосов
/ 24 мая 2011

Как упомянул BraedenP, поле listview по умолчанию составляет -15px с каждой стороны. Я столкнулся с этой же проблемой и обнаружил, что это полностью преднамеренно:

Это на самом деле работает как задумано. И вот почему: блок содержимого тела имеет отступ в 15 пикселей, поэтому все, что вы вставите, будет выглядеть равномерно, и это хорошо работает для всего, кроме этих списков полной ширины.

В большинстве приложений вы используете только полный список шириной без вставки, только с панелями инструментов и без полей между ними, поэтому мы используем отступ 15px, чтобы обойти заполнение тела. Если вы смешиваете и сопоставляете списки, кнопки, элементы формы и контент, списки вставок выглядят лучше, и именно для этого они и предназначены.

Эта система позволяет очень легко использовать одни и те же утверждения разметки, и в большинстве случаев она "просто работает". Если у вас есть ситуация, когда вы хотите, чтобы список во всю ширину был сложен с другими элементами, вы можете добавить переопределение CSS, как вы предложили, но это выглядит довольно странно, если вы не сделаете некоторые дополнительные стили.

(с билет в репозитории jQuery github .)

2 голосов
/ 25 апреля 2011

В качестве альтернативы вы можете использовать разделитель списка вместо тега p (просто тема):

http://jsfiddle.net/r2whr/4/

<div data-role="content">
   <!-- <p>You need to select a page:</p> -->

    <ol data-role="listview">
        <li data-role="list-divider">You need to select a page:</li> 
        <li><a href="#page2">Item 1</a></li>
        <li><a href="#page2">Item 2</a></li>
    </ol>
</div>
...