jQueryMobile：ListView 上的右边距答案

【问题标题】：jQueryMobile: Right Margin on a ListViewjQueryMobile：ListView 上的右边距
【发布时间】：2012-02-25 00:37:38
【问题描述】：

我在 jQueryMobile 中有一个简单的listview，它填充了屏幕的宽度（默认行为）。

我怎样才能让它呈现在列表右侧有一个50px margin？生成的 listview 结构看起来会稍微偏离中心向左（这是理想的）

【问题讨论】：

你能试试把data-inset="true"加到ul吗？

标签： jquery listview jquery-mobile

【解决方案1】：

只需将该 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 定位元素的最简单方法是给它一个 ID 并定位该 ID：

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

更新

您可以像这样定位过滤器搜索栏：

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

这是一个演示：http://jsfiddle.net/jasper/HjurM/3/

【讨论】：

效果很好，但是 ListView 上的 SearchBar 仍然很宽，是否有可以完成完整 ListView 的设置？
@BahaiResearch.com 查看我回答中的最后一个更新。

【解决方案2】：

您可以在 data-role="page" 上使用 data-role="content" 元素将不再填满屏幕的宽度，但周围有一个不错的标准 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" 现在是deprecated。所以我们只剩下：

旧：

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

新：

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

【讨论】：