jQueryMobile: Правая граница в ListView

Question

У меня есть простой listview в jQueryMobile, который заполняет ширину экрана (поведение по умолчанию).

Как я могу сделать так, чтобы с правой сторонысписок?Результирующая структура listview будет выглядеть немного смещенной влево (желательно)

Answer 1

Вы можете использовать data-role = "content" на своей data-role = "page", и элементы больше не будут занимать всю ширину экрана, а будут иметь хороший стандартный отступ в 20px.

Fiddle

<div data-role="page">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>1st Item</li>
            <li>2nd Item</li>
            <li>3rd Item</li>
        </ul>
    </div>
</div>

Но data-role = "content" сейчас устарело . Таким образом, мы остались с:

Old:

<div data-role="content">
</div>

Новое:

<div class="ui-content" role="main">
</div>

Answer 2

Просто добавьте этот CSS к элементу <ul data-role="listview">:

<ul data-role="listview" style="margin-right: 50px">
    ...
</ul>

Вот демоверсия: http://jsfiddle.net/jasper/HjurM/

Вы также можете использовать этот элемент в своей таблице стилей CSS вместо использования встроенного CSS:

.ui-page .ui-content .ui-listview {
    margin-right : 50px;
}​

Вот демоверсия: http://jsfiddle.net/jasper/HjurM/1/

Конечно, самым простым способом нацеливания на элемент с помощью CSS было бы дать ему идентификатор и нацелить этот идентификатор:

#my-offset-ul {
    margin-right : 50px;
}

Обновление

Вы можете настроить таргетинг на панель поиска фильтра следующим образом:

.ui-page .ui-content .ui-listview-filter {
    margin-right : 50px;
}​

Вот демоверсия: http://jsfiddle.net/jasper/HjurM/3/