Question

我正在使用带有缩略图的Jquery Mobile列表视图。在这个列表视图中，我将有另一个列表视图，它再次使用缩略图，也设置为插入（外部列表视图不插入）

我的代码工作正常，但我希望能够在第一个列表视图中使用缩略图下的空格，以便我的内部列表视图的宽度是屏幕的宽度。

这是我所拥有的JSFiddle，你可以从中看到我想要实现的目标：

http://jsfiddle.net/DonalRafferty83/NHku5/1/

JSFiddle的代码如下：

<ul data-role="listview" data-inset="true">
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Broken Bells</h2>
                        <p>Broken Bells</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Warning</h2>
                        <p>Hot Chip</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p>

                        <ul data-role="listview" data-inset="true" style="width:100%;margin-top:50px;">
                            <li><img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /><h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p></li>
                        </ul>
                        </a>
                    </li>
                </ul>

您可以从JSFiddle看到内部列表元素仅占用大约75％的空间，并且位于外部列表视图元素中缩略图的右侧。我的猜测是，当在列表视图元素中使用缩略图时，JQM会像这样对齐吗？

所以我的问题是 - 是否有一种简单的方法可以让内部列表视图元素占据100％的宽度并显示在外部列表视图元素的缩略图下？

Answer 1

首先需要在任何元素中包装第二个 listview ，例如span;否则，它将被转换为嵌套Listview 。

提供包含 listview li或id的{{1}}元素，因为您只会覆盖此特定元素的样式。

class

已关联列表视图：

您只需要重新定位}父<{1}}的链接图标。

<li class="custom-li"> <span> <ul data-role="listview"> <li>Item</li> </ul> </span> </li>

<强> Demo

只读列表视图：

移除父li的{{1}}，然后将.custom-li .ui-icon-arrow-r { top: 20% !important; }应用于＆＃34;直接＆＃34;仅限子元素，padding和li;然后重新定位第二个padding-left。

p

<强> Demo

JQM - 如何在listview中使用缩略图下的空间

1 个答案: