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

我正在使用带有缩略图的Jquery Mobile listview。在这个listview中，我将有另一个listview，它再次使用缩略图，也被设置为inset（外部listview不是inset）

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

下面是我所拥有的东西的一部分，您可以从中看到我试图实现的目标：

JSFIDLE中的代码如下所示：

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

您可以从JSFIDLE中看到，内部列表元素只占大约75%的空间，位于外部列表视图元素中缩略图的右侧。我的猜测是，当在列表视图元素中使用缩略图时，JQM会像这样对齐所有内容

---

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

您需要首先在任何元素中包装第二个列表视图，例如

span

；否则，它将转换为嵌套的Listview

为包装列表视图的

li

元素指定一个

id

或

class

，因为您将仅覆盖此特定元素的样式

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

只读列表视图：

删除父元素

li

的

padding

，然后仅在“direct”子元素上应用

padding left

，

p

和

h2

；然后重新定位第二个

ul

.custom-li {
  padding: 0;
}

.custom-li > p, .custom-li > h2 {
  padding-left: 100px;
}

.custom-li .ui-listview {
  margin-top: 34px;
}

---

像这样？是的，像那样，但我实际上没有使用链接列表，所以当我删除锚，我仍然坚持即使你的解决方案，请检查这个新的小提琴-检查这个完美的，你想添加它作为一个答案，我会标记为正确？

.custom-li {
  padding: 0;
}

.custom-li > p, .custom-li > h2 {
  padding-left: 100px;
}

.custom-li .ui-listview {
  margin-top: 34px;
}