Question

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

如何渲染它以便列表右侧有50px margin？生成的listview结构看起来略微偏向左侧（这是所需的）

Answer 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/

Answer 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>

jQueryMobile：ListView上的右边距

2 个答案:

更新